add new components for new ui time dims and inf dims, fix achievement tab and reality upgrades tab on new ui

index.html

@@ -352,6 +352,10 @@
 <script type="text/javascript" src="javascripts/components/new-ui/dimensions-tab/new-dimension-row.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/dimensions-tab/new-tickspeed-row.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/dimensions-tab/new-dim-shift-row.js"></script>
+<script type="text/javascript" src="javascripts\components\new-ui\infinity-dimensions-tab\new-inf-dimension-row.js"></script>
+<script type="text/javascript" src="javascripts\components\new-ui\infinity-dimensions-tab\new-inf-dimensions-tab.js"></script>
+<script type="text/javascript" src="javascripts\components\new-ui\time-dimensions-tab\new-time-dimension-row.js"></script>
+<script type="text/javascript" src="javascripts\components\new-ui\time-dimensions-tab\new-time-dimensions-tab.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/dimensions-tab/new-galaxy-row.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/sidebar-resources/sidebar-am.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/sidebar-resources/sidebar-ip.js"></script>

javascripts/components/new-ui/infinity-dimensions-tab/new-inf-dimension-row.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Vue.component("new-inf-dimension-row", {
+  props: {
+    tier: Number
+  },
+  data() {
+    return {
+      isUnlocked: false,
+      multiplier: new Decimal(0),
+      amount: new Decimal(0),
+      bought: 0,
+      hasRateOfChange: false,
+      rateOfChange: new Decimal(0),
+      isAutobuyerUnlocked: false,
+      cost: new Decimal(0),
+      isAvailableForPuchase: false,
+      isCapped: false,
+      capIP: new Decimal(0),
+      autobuyers: player.infDimBuyers,
+      isEC8Running: false,
+      hardcap: HARDCAP_ID_PURCHASES,
+    };
+  },
+  computed: {
+    name() {
+      return SHORT_DISPLAY_NAMES[this.tier];
+    },
+    rateOfChangeDisplay() {
+      return this.hasRateOfChange
+        ? ` (+${this.shortenRateOfChange(this.rateOfChange)}%/s)`
+        : "";
+    },
+    costDisplay() {
+      return this.isCapped ? "Capped!" : `Cost: ${this.shortenCosts(this.cost)} IP`;
+    },
+    hardcapPurchases() {
+      return this.shorten(this.hardcap, 1, 1);
+    },
+    capTooltip() {
+      return this.isCapped
+        ? `Limited to ${this.hardcapPurchases} upgrades (${this.shortenCosts(this.capIP)} IP)`
+        : undefined;
+    }
+  },
+  methods: {
+    update() {
+      const tier = this.tier;
+      const dimension = InfinityDimension(tier);
+      this.isUnlocked = dimension.isUnlocked;
+      if (!this.isUnlocked) return;
+      this.multiplier.copyFrom(dimension.multiplier);
+      this.amount.copyFrom(dimension.amount);
+      this.bought = dimension.bought;
+      this.hasRateOfChange = dimension.hasRateOfChange;
+      if (this.hasRateOfChange) {
+        this.rateOfChange.copyFrom(dimension.rateOfChange);
+      }
+      this.isAutobuyerUnlocked = dimension.isAutobuyerUnlocked;
+      this.cost.copyFrom(dimension.cost);
+      this.isAvailableForPuchase = dimension.isAvailableForPuchase;
+      this.isCapped = dimension.isCapped;
+      if (this.isCapped) {
+        this.capIP.copyFrom(dimension.hardcapIPAmount);
+        this.hardcap = dimension.purchaseCap;
+      }
+      this.isEC8Running = EternityChallenge(8).isRunning;
+    },
+    buyManyInfinityDimension() {
+      buyManyInfinityDimension(this.tier);
+    }
+  },
+  template:
+    `<div v-show="isUnlocked" class="c-infinity-dim-row">
+      <div
+        class="c-infinity-dim-row__label c-infinity-dim-row__name"
+      >{{name}} Infinity D <span class="c-infinity-dim-row__multiplier">x{{shortenMoney(multiplier)}}</span></div>
+      <div
+        class="c-infinity-dim-row__label c-infinity-dim-row__label--growable"
+      >{{shortenDimensions(amount)}}</div>
+      <primary-button-on-off
+        v-if="isAutobuyerUnlocked && !isEC8Running"
+        v-model="autobuyers[tier - 1]"
+        class="o-primary-btn--id-autobuyer c-infinity-dim-row__button"
+        text="Auto:"
+      />
+      <primary-button
+        v-tooltip="capTooltip"
+        :enabled="isAvailableForPuchase"
+        class="o-primary-btn--buy-id c-infinity-dim-row__button storebtn"
+        @click="buyManyInfinityDimension"
+      >{{costDisplay}}</primary-button>
+    </div>`,
+});

javascripts/components/new-ui/infinity-dimensions-tab/new-inf-dimensions-tab.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Vue.component("new-inf-dimensions-tab", {
+  data() {
+    return {
+      infinityPower: new Decimal(0),
+      dimMultiplier: new Decimal(0),
+      powerPerSecond: new Decimal(0),
+      incomeType: "",
+      isEC8Running: false,
+      EC8PurchasesLeft: 0,
+      isAnyAutobuyerUnlocked: false
+    };
+  },
+  computed: {
+    sacrificeBoostDisplay() {
+      return this.shortenRateOfChange(this.sacrificeBoost);
+    },
+    sacrificeTooltip() {
+      return `Boosts 8th Dimension by ${this.sacrificeBoostDisplay}x`;
+    },
+  },
+  methods: {
+    update() {
+      const infinityPower = player.infinityPower;
+      this.infinityPower.copyFrom(infinityPower);
+      if (EternityChallenge(9).isRunning) {
+        this.dimMultiplier.copyFrom(Decimal.pow(Math.max(infinityPower.log2(), 1), 4).max(1));
+      } else {
+        const conversionRate = 7 + getAdjustedGlyphEffect("infinityrate");
+        this.dimMultiplier.copyFrom(infinityPower.pow(conversionRate).max(1));
+      }
+      this.powerPerSecond.copyFrom(InfinityDimension(1).productionPerSecond);
+      this.incomeType = EternityChallenge(7).isRunning ? "Seventh Dimensions" : "Infinity Power";
+      this.isEC8Running = EternityChallenge(8).isRunning;
+      if (this.isEC8Running) {
+        this.EC8PurchasesLeft = player.eterc8ids;
+      }
+      this.isAnyAutobuyerUnlocked = InfinityDimension(1).isAutobuyerUnlocked;
+    },
+    maxAll() {
+      buyMaxInfinityDimensions();
+    },
+    toggleAllAutobuyers() {
+      toggleAllInfDims();
+    },
+  },
+  template:
+  `<div class="l-infinity-dim-tab">
+  <div>
+    <p>
+      You have
+      <span class="c-infinity-dim-description__accent">{{shortenMoney(infinityPower)}}</span> infinity power,
+      translated to
+      <span class="c-infinity-dim-description__accent">{{shortenMoney(dimMultiplier)}}</span>x
+      multiplier on all dimensions
+    </p>
+  </div>
+  <div>You are getting {{shortenDimensions(powerPerSecond)}} {{incomeType}} per second.</div>
+  <primary-button
+    v-if="!isEC8Running"
+    class="o-primary-btn--buy-max l-infinity-dim-tab__buy-max"
+    @click="maxAll"
+  >Max all</primary-button>
+  <div class="l-infinity-dim-tab__row-container">
+    <new-inf-dimension-row
+      v-for="tier in 8"
+      :key="tier"
+      :tier="tier"
+    />
+  </div>
+  <div
+    v-if="isEC8Running"
+    class="l-infinity-dim-tab__ec8-purchases"
+  >You have {{EC8PurchasesLeft}} {{"purchase" | pluralize(EC8PurchasesLeft)}} left.</div>
+  <primary-button
+    v-if="isAnyAutobuyerUnlocked && !isEC8Running"
+    class="o-primary-btn--id-all-autobuyers l-infinity-dim-tab__all-autobuyers"
+    @click="toggleAllAutobuyers"
+  >Toggle all ON/OFF</primary-button>
+</div>`
+});

javascripts/components/new-ui/time-dimensions-tab/new-time-dimension-row.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Vue.component("new-time-dimension-row", {
+  props: {
+    tier: Number,
+    areAutobuyersUnlocked: Boolean
+  },
+  data() {
+    return {
+      isUnlocked: false,
+      isCapped: false,
+      multiplier: new Decimal(0),
+      amount: new Decimal(0),
+      rateOfChange: new Decimal(0),
+      cost: new Decimal(0),
+      isAffordable: false,
+      autobuyers: player.reality.tdbuyers
+    };
+  },
+  computed: {
+    name() {
+      return SHORT_DISPLAY_NAMES[this.tier];
+    },
+    rateOfChangeDisplay() {
+      return this.tier < 8
+        ? ` (+${this.shortenRateOfChange(this.rateOfChange)}%/s)`
+        : "";
+    },
+    buttonContents() {
+      return this.isCapped ? "Capped" : `Cost: ${this.shortenDimensions(this.cost)} EP`;
+    }
+  },
+  methods: {
+    update() {
+      const tier = this.tier;
+      const dimension = TimeDimension(tier);
+      const isUnlocked = dimension.isUnlocked;
+      this.isCapped = Enslaved.isRunning && dimension.bought > 0;
+      this.isUnlocked = isUnlocked;
+      if (!isUnlocked) return;
+      this.multiplier.copyFrom(dimension.multiplier);
+      this.amount.copyFrom(dimension.amount);
+      if (tier < 8) {
+        this.rateOfChange.copyFrom(dimension.rateOfChange);
+      }
+      this.cost.copyFrom(dimension.cost);
+      this.isAffordable = dimension.isAffordable;
+    },
+    buyTimeDimension() {
+      buyTimeDimension(this.tier);
+    }
+  },
+  template:
+    `<div v-show="isUnlocked" class="c-time-dim-row">
+      <div
+        class="c-time-dim-row__label c-time-dim-row__name"
+      >{{name}} Time D <span class="c-time-dim-row__multiplier">x{{shortenMoney(multiplier)}}</span></div>
+      <div
+        class="c-time-dim-row__label c-time-dim-row__label--growable"
+      >{{shortenDimensions(amount)}}</div>
+      <primary-button-on-off
+        v-if="areAutobuyersUnlocked"
+        v-model="autobuyers[tier - 1]"
+        class="o-primary-btn--td-autobuyer c-time-dim-row__button"
+        text="Auto:"
+      />
+      <primary-button
+        :enabled="isAffordable"
+        class="o-primary-btn--buy-td c-time-dim-row__button storebtn"
+        @click="buyTimeDimension"
+      >{{buttonContents}}</primary-button>
+    </div>`,
+});

javascripts/components/new-ui/time-dimensions-tab/new-time-dimensions-tab.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Vue.component("new-time-dimensions-tab", {
+  data() {
+    return {
+      totalUpgrades: 0,
+      timeShards: new Decimal(0),
+      upgradeThreshold: new Decimal(0),
+      shardsPerSecond: new Decimal(0),
+      incomeType: "",
+      showCostScaleTooltip: false,
+      areAutobuyersUnlocked: false
+    };
+  },
+  computed: {
+    totalUpgradesDisplay() {
+      return formatWithCommas(this.totalUpgrades);
+    },
+    e6000Tooltip() {
+      return "TD costs start increasing faster after " + shortenDimensions(new Decimal("1e6000"));
+    },
+    costScaleTooltip() {
+      return this.showCostScaleTooltip ? this.e6000Tooltip : undefined;
+    }
+  },
+  methods: {
+    update() {
+      this.totalUpgrades = player.totalTickGained;
+      this.timeShards.copyFrom(player.timeShards);
+      this.upgradeThreshold.copyFrom(player.tickThreshold);
+      this.shardsPerSecond.copyFrom(TimeDimension(1).productionPerSecond);
+      this.incomeType = EternityChallenge(7).isRunning ? "Eighth Infinity Dimensions" : "time shards";
+      this.showCostScaleTooltip = player.eternityPoints.exponent > 6000;
+      this.areAutobuyersUnlocked = RealityUpgrade(13).isBought;
+    },
+    maxAll() {
+      buyMaxTimeDimensions();
+    },
+    toggleAllAutobuyers() {
+      toggleAllTimeDims();
+    }
+  },
+  template:
+    `<div class="l-time-dim-tab l-centered-vertical-tab">
+      <div>
+        <p>You've gained {{totalUpgradesDisplay}} tickspeed upgrades.</p>
+        <p>
+          You have
+          <span class="c-time-dim-description__accent">{{shortenMoney(timeShards)}}</span> time shards.
+          Next tickspeed upgrade at
+          <span class="c-time-dim-description__accent">{{shortenMoney(upgradeThreshold)}}</span>
+        </p>
+      </div>      
+      <div>You are getting {{shortenDimensions(shardsPerSecond)}} {{incomeType}} per second.</div>
+      <primary-button
+        v-tooltip="costScaleTooltip"
+        class="o-primary-btn--buy-max l-time-dim-tab__buy-max"
+        @click="maxAll"
+      >Max all</primary-button>
+      <div class="l-time-dim-tab__row-container">
+        <new-time-dimension-row
+          v-for="tier in 8"
+          :key="tier"
+          :tier="tier"
+          :areAutobuyersUnlocked="areAutobuyersUnlocked"
+        />
+      </div>
+      <primary-button
+        v-if="areAutobuyersUnlocked"
+        class="o-primary-btn--td-all-autobuyers l-time-dim-tab__all-autobuyers"
+        @click="toggleAllAutobuyers"
+      >Toggle all ON/OFF</primary-button>
+    </div>`
+});

javascripts/core/secret-formula/tabs.js

@@ -17,6 +17,7 @@ GameDatabase.tabs = [
         name: "Infinity Dimensions",
         symbol: "∞",
         component: "infinity-dim-tab",
+        newUIComponent: "new-inf-dimensions-tab",
         condition: () => player.eternities > 0 || InfinityDimension(1).isUnlocked
       },
       {
@@ -24,6 +25,7 @@ GameDatabase.tabs = [
         name: "Time Dimensions",
         symbol: "Δ",
         component: "time-dim-tab",
+        newUIComponent: "new-time-dimensions-tab",
         condition: () => player.eternities > 0
       },
       {

stylesheets/new-ui-styles.css

@@ -755,10 +755,12 @@ body.t-dark {
 
 /* FIXING OLD TABS */
 
+.l-achievement-grid__cell {
+  margin: -0.5rem -0.5rem;
+}
+
 .o-achievement {
-  height: 8.6rem;
-  width: 8.6rem;
-  background-size: contain;
+  transform:scale(0.8)
 }
 
 .o-infinity-upgrade-btn--unavailable {
@@ -794,6 +796,16 @@ body.t-dark {
   background: #414141;
 }
 
+.o-primary-btn--disabled {
+  background: #752626;
+  border-color: var(--color-bad) !important;
+  cursor: default;
+}
+
+.o-primary-btn--disabled:hover {
+  background: var(--color-bad) !important;
+}
+
 .c-challenge-box--normal {
   color: var(--color-text);
   background: var(--color-dark);
@@ -832,4 +844,62 @@ body.t-dark {
 
 .c-replicanti-description__accent {
   color: #2196f3
+}
+
+.c-infinity-dim-description__accent {
+  color: var(--color-infinity);
+}
+
+.l-infinity-dim-tab {
+  padding: 1rem 6rem;
+}
+
+.c-infinity-dim-row {
+  padding-left: 1rem;
+  border-radius: .5rem;
+}
+
+.c-infinity-dim-row:nth-child(even) {
+  background: #5f441e;
+}
+
+.c-infinity-dim-row__name {
+  font-size: 2rem;
+}
+
+.c-infinity-dim-row__multiplier {
+  font-size: 1.4rem
+}
+
+.c-time-dim-description__accent {
+  color: var(--color-eternity);
+}
+
+.l-time-dim-tab {
+  padding: 2rem 0;
+}
+
+.c-time-dim-row {
+  padding-left: 1rem;
+  border-radius: .5rem;
+}
+
+.c-time-dim-row:nth-child(even) {
+  background: #63217d
+}
+
+.c-time-dim-row__name {
+  font-size: 2rem;
+}
+
+.c-time-dim-row__multiplier {
+  font-size: 1.4rem
+}
+
+.l-reality-upgrade-grid__row > * {
+  margin: 0.5rem;
+}
+
+.c-reality-upgrade-btn {
+  width: 15.6rem;
 }