Make extra tickspeed info only appear after reality, fixes #3025

public/stylesheets/new-ui-styles.css

@@ -497,20 +497,6 @@ body.t-s9 {
   margin-top: 0.3rem;
 }
 
-.l-tickspeed-container {
-  display: flex;
-  justify-content: center;
-  padding: 1rem 5rem 0 9rem;
-}
-
-.l-tickspeed-container--hidden {
-  visibility: hidden;
-}
-
-.tickspeed-labels {
-  display: flex;
-}
-
 .tickspeed-btn {
   height: 3rem;
   min-width: 15rem;
@@ -525,12 +511,6 @@ body.t-s9 {
   padding: 0.5rem;
 }
 
-.tickspeed-labels span {
-  height: 3rem;
-  color: var(--color-text);
-  padding: 0.5rem 1rem;
-}
-
 .particle {
   width: 1rem;
   height: 1rem;

src/components/tabs/antimatter-dimensions/TickspeedRow.vue

@@ -15,6 +15,7 @@ export default {
       isContinuumActive: false,
       continuumValue: 0,
       hasTutorial: false,
+      hasRealityButton: false,
     };
   },
   computed: {
@@ -33,21 +34,19 @@ export default {
     tickspeedDisplay() {
       return `Tickspeed: ${format(this.tickspeed, 2, 3)} / sec`;
     },
-    showCostTitle() {
-      return this.cost.exponent < 1000000;
-    },
     continuumString() {
       return formatFloat(this.continuumValue, 2);
     },
     upgradeCount() {
       const purchased = this.purchasedTickspeed;
-      if (!this.freeTickspeed) return `${formatInt(purchased)} Purchased`;
+      if (!this.freeTickspeed) return `${formatInt(purchased)} Purchased Upgrades`;
       if (purchased === 0 || this.isContinuumActive) return `${formatInt(this.freeTickspeed)} Free Upgrades`;
       return `${formatInt(purchased)} Purchased + ${formatInt(this.freeTickspeed)} Free`;
     }
   },
   methods: {
     update() {
+      this.hasRealityButton = PlayerProgress.realityUnlocked() || TimeStudy.reality.isBought;
       this.purchasedTickspeed = player.totalTickBought;
       this.freeTickspeed = FreeTickspeed.amount;
       const isEC9Running = EternityChallenge(9).isRunning;
@@ -82,11 +81,6 @@ export default {
 
 <template>
   <div :class="classObject">
-    <div class="tickspeed-labels">
-      <span>
-        {{ tickspeedDisplay }} <span>{{ multiplierDisplay }}</span>
-      </span>
-    </div>
     <div class="tickspeed-buttons">
       <button
         v-tooltip="upgradeCount"
@@ -94,10 +88,10 @@ export default {
         @click="buyUpgrade"
       >
         <span v-if="isContinuumActive">
-          {{ continuumString }} (cont.)
+          Tickspeed Continuum: {{ continuumString }}
         </span>
         <span v-else>
-          Cost: {{ format(cost) }}
+          Tickspeed Cost: {{ format(cost) }}
         </span>
         <div
           v-if="hasTutorial"
@@ -113,6 +107,14 @@ export default {
         Buy Max
       </button>
     </div>
+    <div
+      v-if="hasRealityButton"
+      class="tickspeed-labels"
+    >
+      {{ tickspeedDisplay }}
+      <br>
+      {{ multiplierDisplay }}
+    </div>
   </div>
 </template>
 
@@ -122,6 +124,23 @@ export default {
   vertical-align: middle;
 }
 
+.tickspeed-labels {
+  color: var(--color-text);
+  padding: 0.5rem 1rem;
+}
+
+.l-tickspeed-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+}
+
+.l-tickspeed-container--hidden {
+  visibility: hidden;
+}
+
 .tickspeed-max-btn {
   margin-left: 0.5rem;
 }

src/components/ui-modes/HeaderTickspeedInfo.vue

@@ -11,16 +11,34 @@ export default {
       mult: new Decimal(0),
       tickspeed: new Decimal(0),
       galaxyCount: 0,
+      purchasedTickspeed: 0,
+      freeTickspeed: 0,
     };
   },
   computed: {
     tickspeedDisplay() {
-      return `AD Tickspeed: ${format(this.tickspeed, 2, 3)} / sec`;
+      return `Total Tickspeed: ${format(this.tickspeed, 2, 3)} / sec`;
     },
     perUpgrade() {
       if (InfinityChallenge(3).isRunning) return `Tickspeed upgrades give
         ${formatX(1.05 + this.galaxyCount * 0.005, 3, 3)} to all ADs`;
-      return `${formatX(this.mult.reciprocal(), 2, 3)} faster per upgrade`;
+      return `ADs produce ${formatX(this.mult.reciprocal(), 2, 3)} faster per Tickspeed upgrade`;
+    },
+    upgradeCount() {
+      const upgrades = [];
+      if (this.purchasedTickspeed) upgrades.push(`${formatInt(this.purchasedTickspeed)} Purchased`);
+      if (this.freeTickspeed) upgrades.push(`${formatInt(this.freeTickspeed)} Free`);
+
+      switch (upgrades.length) {
+        case 0:
+          return "You have no Tickspeed Upgrades";
+        case 1:
+          return `You have ${upgrades[0]} Tickspeed Upgrades`;
+        case 2:
+          return `Upgrades: ${upgrades.join(" + ")}`;
+        default:
+          return "";
+      }
     }
   },
   methods: {
@@ -28,6 +46,8 @@ export default {
       this.mult.copyFrom(Tickspeed.multiplier);
       this.tickspeed.copyFrom(Tickspeed.perSecond);
       this.galaxyCount = player.galaxies;
+      this.purchasedTickspeed = player.totalTickBought;
+      this.freeTickspeed = FreeTickspeed.amount;
     },
   },
 };
@@ -35,11 +55,13 @@ export default {
 
 <template>
   <div>
-    <br>
-    {{ tickspeedDisplay }}
     <br>
     {{ perUpgrade }}
     <br>
+    {{ upgradeCount }}
+    <br>
+    {{ tickspeedDisplay }}
+    <br>
     <GameSpeedDisplay />
   </div>
 </template>