Merge pull request #2606 from IvarK/reset-reality-button-adjustment

public/stylesheets/styles.css

@@ -709,12 +709,12 @@ button:focus {
 }
 
 .c-reset-reality-button {
-  height: 35%;
+  height: 100%;
   font-family: Typewriter;
   font-size: 1.2rem;
   font-weight: bold;
   color: var(--color-bad);
-  background: white;
+  background: black;
   border-color: var(--color-bad);
   border-style: solid;
   border-width: var(--var-border-width, 0.2rem);
@@ -729,15 +729,10 @@ button:focus {
 .t-s6 .c-reset-reality-button.force-hover,
 .t-s10 .c-reset-reality-button:hover,
 .t-s10 .c-reset-reality-button.force-hover {
-  color: white;
+  color: black;
   background: var(--color-bad);
 }
 
-.t-s6 .c-reset-reality-button,
-.t-s10 .c-reset-reality-button {
-  background: black;
-}
-
 .c-reset-reality-button-celestial {
   color: var(--color-celestials);
   border-color: var(--color-celestials);
@@ -749,15 +744,10 @@ button:focus {
 .t-s6 .c-reset-reality-button-celestial.force-hover,
 .t-s10 .c-reset-reality-button-celestial:hover,
 .t-s10 .c-reset-reality-button-celestial.force-hover {
-  color: white;
+  color: black;
   background: var(--color-celestials);
 }
 
-.t-s6 .c-reset-reality-button-celestial,
-.t-s10 .c-reset-reality-button-celestial {
-  background: black;
-}
-
 .l-reality-amplify-button {
   font-family: Typewriter;
   background-color: #fdd3b0;

src/components/tabs/glyphs/GlyphsTab.vue

@@ -110,22 +110,24 @@ export default {
         <div class="l-reality-button-group">
           <div class="l-reality-button-group-half">
             <ResetRealityButton v-if="resetRealityDisplayed" />
-
-            <div v-if="isInCelestialReality">
-              <input
-                id="autoRestart"
-                v-model="autoRestartCelestialRuns"
-                type="checkbox"
-                :value="autoRestartCelestialRuns"
-                @input="toggleAutoRestartCelestial()"
-              >
-              <label for="autoRestart">Repeat this Celestial's Reality</label>
-            </div>
-            <RealityAmplifyButton v-else />
           </div>
           <RealityButton />
         </div>
 
+        <div v-if="isInCelestialReality">
+          <input
+            id="autoRestart"
+            v-model="autoRestartCelestialRuns"
+            type="checkbox"
+            :value="autoRestartCelestialRuns"
+            @input="toggleAutoRestartCelestial()"
+          >
+          <label for="autoRestart">Repeat this Celestial's Reality</label>
+        </div>
+        <RealityAmplifyButton v-else />
+
+        <br>
+
         <RealityReminder />
 
         <div v-if="showInstability">

src/components/tabs/glyphs/RealityAmplifyButton.vue

@@ -37,31 +37,30 @@ export default {
 </script>
 
 <template>
-  <div v-if="isVisible">
-    <button
-      :class="['l-reality-amplify-button', {'o-enslaved-mechanic-button--storing-time': isActive}]"
-      class="c-button-wrapper"
-      :ach-tooltip="tooltip"
-      @click="toggleActive"
-    >
-      <div v-if="isDoomed">
-        You cannot amplify Doomed Realities.
-      </div>
-      <div v-else-if="canAmplify">
-        <span v-if="isActive">Will be amplified:</span>
-        <span v-else>Amplify this Reality:</span>
-        <br>
-        All rewards ×{{ formatInt(ratio) }}
-      </div>
-      <div v-else>
-        Not enough stored real time to amplify.
-      </div>
-    </button>
-  </div>
+  <button
+    v-if="isVisible"
+    :class="['l-reality-amplify-button', {'o-enslaved-mechanic-button--storing-time': isActive}]"
+    class="c-button-wrapper"
+    :ach-tooltip="tooltip"
+    @click="toggleActive"
+  >
+    <div v-if="isDoomed">
+      You cannot amplify Doomed Realities.
+    </div>
+    <div v-else-if="canAmplify">
+      <span v-if="isActive">Will be amplified:</span>
+      <span v-else>Amplify this Reality:</span>
+      All rewards ×{{ formatInt(ratio) }}
+    </div>
+    <div v-else>
+      Not enough stored real time to amplify.
+    </div>
+  </button>
 </template>
 
 <style scoped>
 .c-button-wrapper {
-  width: 100%;
+  width: calc(100% - 1rem);
+  margin-bottom: 1rem;
 }
 </style>

src/components/tabs/glyphs/RealityButton.vue

@@ -5,6 +5,7 @@ export default {
     return {
       isDoomed: false,
       canReality: false,
+      showSpecialEffect: false,
       hasRealityStudy: false,
       machinesGained: new Decimal(),
       projectedRM: new Decimal(),
@@ -51,6 +52,13 @@ export default {
     },
     shardsGainedText() {
       return quantify("Relic Shard", this.shardsGained, 2);
+    },
+    classObject() {
+      return {
+        "c-reality-button--unlocked": this.canReality,
+        "c-reality-button--locked": !this.canReality,
+        "c-reality-button--special": this.showSpecialEffect,
+      };
     }
   },
   methods: {
@@ -80,6 +88,7 @@ export default {
         return result;
       }
 
+      this.showSpecialEffect = this.hasSpecialReward();
       const multiplier = simulatedRealityCount(false) + 1;
       this.projectedRM = MachineHandler.gainedRealityMachines.times(multiplier);
       this.newIMCap = MachineHandler.projectedIMCap;
@@ -122,13 +131,6 @@ export default {
       }
       return Currency.eternityPoints.value.exponent > 4000 &&
         ((Effarig.isRunning && !EffarigUnlock.reality.isUnlocked) || (Enslaved.isRunning && !Enslaved.isCompleted));
-    },
-    classObject() {
-      return {
-        "c-reality-button--unlocked": this.canReality,
-        "c-reality-button--locked": !this.canReality,
-        "c-reality-button--special": this.hasSpecialReward(),
-      };
     }
   }
 };
@@ -138,7 +140,7 @@ export default {
   <div class="l-reality-button l-reality-button-group-half">
     <button
       class="c-reality-button infotooltip"
-      :class="classObject()"
+      :class="classObject"
       @click="handleClick"
     >
       <div class="l-reality-button__contents">

src/components/tabs/glyphs/ResetRealityButton.vue

@@ -6,13 +6,23 @@ export default {
       canReality: false,
       resetCelestial: false,
       isInCelestialReality: false,
+      isDoomed: false,
     };
   },
+  computed: {
+    resetText() {
+      if (this.isDoomed) return "Start this Armageddon over";
+      if (this.isInCelestialReality && !this.resetCelestial) return "Exit this Celestial early";
+      if (this.isInCelestialReality && this.resetCelestial) return "Restart this Celestial";
+      return "Start this Reality over";
+    },
+  },
   methods: {
     update() {
       this.canReality = TimeStudy.reality.isBought && player.records.thisReality.maxEP.exponent >= 4000;
       this.resetCelestial = player.options.retryCelestial;
       this.isInCelestialReality = isInCelestialReality();
+      this.isDoomed = Pelle.isDoomed;
     },
     resetReality() {
       const confirms = player.options.confirmations;
@@ -22,12 +32,6 @@ export default {
       } else if (confirms.resetReality) Modal.resetReality.show();
       else beginProcessReality(getRealityProps(true));
     },
-    resetText() {
-      if (Pelle.isDoomed) return "Start this Armageddon over";
-      if (this.isInCelestialReality && !this.resetCelestial) return "Exit this Celestial early";
-      if (this.isInCelestialReality && this.resetCelestial) return "Restart this Celestial";
-      return "Start this Reality over";
-    },
   }
 };
 </script>
@@ -40,7 +44,7 @@ export default {
     @click="resetReality"
   >
     <div class="l-reality-button__contents">
-      {{ resetText() }}
+      {{ resetText }}
     </div>
   </button>
 </template>