G420/locked subtab (#964)

* do not show locked subtab when switching tabs

* do not hide dilation subtab on reality

add styles for locked "dilate time" button

* show some more subtabs after reality/eternity

IC's tab is always unlocked after eternity, even if no IC's are available

EC's tab is always unlocked after reality
          PlayerProgress.eternityUnlocked() ||

Challenge records are always shown after infinity/eternity/reality

javascripts/components/eternity/dilation/dilation-button.js

@@ -3,6 +3,7 @@
 Vue.component("dilation-button", {
   data() {
     return {
+      isUnlocked: false,
       isRunning: false,
       hasGain: false,
       requiredForGain: new Decimal(0),
@@ -13,6 +14,7 @@ Vue.component("dilation-button", {
   },
   methods: {
     update() {
+      this.isUnlocked = TimeStudy.dilation.isBought;
       this.isRunning = player.dilation.active;
       if (!this.isRunning) return;
       this.canEternity = player.infinityPoints.gte(Player.eternityGoal);
@@ -27,8 +29,11 @@ Vue.component("dilation-button", {
     }
   },
   template:
-    `<button class="o-dilation-btn" onclick="startDilatedEternity()">
-      <span v-if="!isRunning">Dilate time.</span>
+    `<button class="o-dilation-btn"
+             :class="isUnlocked ? 'o-dilation-btn--unlocked' : 'o-dilation-btn--locked'"
+             onclick="startDilatedEternity()">
+      <span v-if="!isUnlocked">Purchase the dilation time study to unlock.</span>
+      <span v-else-if="!isRunning">Dilate time.</span>
       <span v-else-if="canEternity && hasGain">
         Disable dilation.
         <br>

javascripts/core/secret-formula/tabs.js

@@ -18,7 +18,7 @@ GameDatabase.tabs = [
         symbol: "∞",
         component: "infinity-dim-tab",
         newUIComponent: "new-inf-dimensions-tab",
-        condition: () => 
+        condition: () =>
           PlayerProgress.realityUnlocked() ||
           PlayerProgress.eternityUnlocked() ||
           InfinityDimension(1).isUnlocked
@@ -67,7 +67,10 @@ GameDatabase.tabs = [
         name: "Challenge records",
         symbol: "<i class='fas fa-stopwatch'></i>",
         component: "challenge-records-tab",
-        condition: () => PlayerProgress.infinityUnlocked()
+        condition: () =>
+          PlayerProgress.realityUnlocked() ||
+          PlayerProgress.eternityUnlocked() ||
+          PlayerProgress.infinityUnlocked()
       },
       {
         key: "infinities",
@@ -130,7 +133,8 @@ GameDatabase.tabs = [
         symbol: "∞",
         component: "infinity-challenges-tab",
         condition: () =>
-          Tab.challenges.eternity.isAvailable ||
+          PlayerProgress.realityUnlocked() ||
+          PlayerProgress.eternityUnlocked() ||
           player.antimatter.e >= 2000 ||
           player.postChallUnlocked > 0
       },
@@ -140,9 +144,9 @@ GameDatabase.tabs = [
         symbol: "Δ",
         component: "eternity-challenges-tab",
         condition: () =>
+          PlayerProgress.realityUnlocked() ||
           player.challenge.eternity.unlocked !== 0 ||
-          EternityChallenges.all.some(ec => ec.completions > 0) ||
-          (player.reality.autoEC && player.realities > 0)
+          EternityChallenges.all.some(ec => ec.completions > 0)
       }
     ],
   },
@@ -213,7 +217,7 @@ GameDatabase.tabs = [
         name: "Time dilation",
         symbol: "Ψ",
         component: "time-dilation-tab",
-        condition: () => TimeStudy.dilation.isBought
+        condition: () => TimeStudy.dilation.isBought || PlayerProgress.realityUnlocked()
       },
       {
         key: "compression",

javascripts/core/ui/tabs.js

@@ -62,6 +62,7 @@ class TabState {
     if (subtab !== undefined) {
       this._currentSubtab = subtab;
     }
+    if (!this._currentSubtab.isAvailable) this.resetCurrentSubtab();
     ui.view.subtab = this._currentSubtab.key;
     Modal.hide();
     EventHub.dispatch(GameEvent.TAB_CHANGED, ui.view.tab, ui.view.subtab);

stylesheets/styles.css

@@ -4000,31 +4000,41 @@ screen and (max-width: 480px) {
 /*#region o-dilation-btn*/
 
 .o-dilation-btn {
-  color: #64dd17;
-  background-color: black;
   font-weight: bold;
   font-size: 1.12rem;
   border: 0.2rem solid #64dd17;
   width: 19rem;
   height: 9rem;
   transition-duration: 0.2s;
-  cursor: pointer;
   border-radius: 0.4rem;
   font-family: Typewriter, serif;
+  padding: 1rem;
+}
+
+.o-dilation-btn--locked {
+  color: #181818;
+  background-color: #5f5f5f;
+  border-color: #3e8a0f;
+}
+
+.o-dilation-btn--unlocked {
+  color: #64dd17;
+  background-color: black;
+  cursor: pointer;
   animation: a-dilation-btn-glow 10s infinite;
 }
 
-.o-dilation-btn:hover {
+.o-dilation-btn--unlocked:hover {
   background-color: white;
 }
 
-.t-dark .o-dilation-btn {
+.t-dark .o-dilation-btn--unlocked {
   color: #64dd17;
   background-color: black;
 }
 
-.t-dark .o-dilation-btn:hover,
-.t-s6 .o-dilation-btn:hover {
+.t-dark .o-dilation-btn--unlocked:hover,
+.t-s6 .o-dilation-btn--unlocked:hover {
   color: #64dd17;
   background-color: white;
 }
@@ -4041,6 +4051,50 @@ screen and (max-width: 480px) {
   border-width: 0.1rem;
 }
 
+.o-dilation-btn--locked:hover {
+  color: #1d1d1d;
+  background-color: #660000;
+}
+
+.t-metro .o-dilation-btn--locked,
+.t-dark-metro .o-dilation-btn--locked,
+.t-inverted-metro .o-dilation-btn--locked,
+.t-s1 .o-dilation-btn--locked,
+.t-s8 .o-dilation-btn--locked {
+  color: black;
+  background-color: #9e9e9e;
+  box-shadow: .1rem .1rem .1rem 0 black;
+  border: none;
+}
+
+.t-metro .o-dilation-btn--locked:hover,
+.t-dark-metro .o-dilation-btn--locked:hover,
+.t-inverted-metro .o-dilation-btn--locked:hover,
+.t-s8 .o-dilation-btn--locked:hover {
+  background-color: #ef5350;
+}
+
+.t-s1 .o-dilation-btn--locked:hover {
+  background-color: #d72621;
+}
+
+.t-s6 .o-dilation-btn--locked {
+  color: gray;
+  background-color: black;
+}
+
+.t-dark .o-dilation-btn--locked {
+  color: black;
+  background-color: #23292a;
+}
+
+.t-dark .o-dilation-btn--locked:hover,
+.t-s6 .o-dilation-btn--locked:hover {
+  color: black;
+  border-color: #b84b5f;
+  background-color: #b84b5f;
+}
+
 @keyframes a-dilation-btn-glow {
   0%   { box-shadow: inset 0.5rem  0       2rem }
   25%  { box-shadow: inset 0       0.5rem  2rem }