Fix mouse cursor issues, fixes #2889

javascripts/core/celestials/enslaved.js

@@ -37,7 +37,7 @@ export const Enslaved = {
   currentBlackHoleStoreAmountPerMs: 0,
   tachyonNerf: 0.3,
   toggleStoreBlackHole() {
-    if (Pelle.isDoomed) return;
+    if (!this.canModifyGameTimeStorage) return;
     player.celestials.enslaved.isStoring = !player.celestials.enslaved.isStoring;
     player.celestials.enslaved.isStoringReal = false;
     if (!Ra.unlocks.adjustableStoredTime.canBeApplied) {
@@ -45,20 +45,28 @@ export const Enslaved = {
     }
   },
   toggleStoreReal() {
-    if (Pelle.isDoomed) return;
+    if (!this.canModifyRealTimeStorage) return;
     player.celestials.enslaved.isStoringReal = !player.celestials.enslaved.isStoringReal;
     player.celestials.enslaved.isStoring = false;
   },
   toggleAutoStoreReal() {
-    if (Pelle.isDoomed) return;
+    if (!this.canModifyRealTimeStorage) return;
     player.celestials.enslaved.autoStoreReal = !player.celestials.enslaved.autoStoreReal;
   },
+  get canModifyGameTimeStorage() {
+    return Enslaved.isUnlocked && !Pelle.isDoomed && !BlackHoles.arePaused && !EternityChallenge(12).isRunning &&
+      !Enslaved.isRunning && !Laitela.isRunning;
+  },
+  get canModifyRealTimeStorage() {
+    return Enslaved.isUnlocked && !Pelle.isDoomed && player.celestials.enslaved.storedReal < this.storedRealTimeCap;
+  },
+  // We assume that the situations where you can't modify time storage settings (of either type) are exactly the cases
+  // where they have also been explicitly disabled via other game mechanics. This also reduces UI boilerplate code.
   get isStoringGameTime() {
-    return Enslaved.isUnlocked && player.celestials.enslaved.isStoring && !BlackHoles.arePaused &&
-      !EternityChallenge(12).isRunning && !Enslaved.isRunning && !Laitela.isRunning;
+    return this.canModifyGameTimeStorage && player.celestials.enslaved.isStoring;
   },
   get isStoringRealTime() {
-    return Enslaved.isUnlocked && player.celestials.enslaved.isStoringReal;
+    return this.canModifyRealTimeStorage && player.celestials.enslaved.isStoringReal;
   },
   get storedRealTimeEfficiency() {
     return 0.7;
@@ -98,9 +106,7 @@ export const Enslaved = {
   },
   // "autoRelease" should only be true when called with the Ra upgrade
   useStoredTime(autoRelease) {
-    if (Pelle.isDoomed) return;
     if (!this.canRelease(autoRelease)) return;
-    if (EternityChallenge(12).isRunning) return;
     player.requirementChecks.reality.slowestBH = 1;
     let release = player.celestials.enslaved.stored;
     if (Enslaved.isRunning) {

public/stylesheets/ad-slider-component.css

@@ -89,7 +89,6 @@ SOFTWARE.
   position: absolute;
   top: 0;
   left: 0;
-  cursor: pointer;
 }
 
 .l-ad-slider__process {
@@ -101,10 +100,9 @@ SOFTWARE.
 .c-ad-slider__process {
   background-color: var(--color-slider-blue);
   border-radius: var(--var-border-radius, 15px);
-  cursor: pointer;
 }
 
-.l-ad-slider__wrap .ad-slider-process.ad-slider-process-draggable {
+.l-ad-slider__wrap .ad-slider-process-draggable {
   z-index: 3;
   cursor: pointer;
 }

public/stylesheets/styles.css

@@ -2000,12 +2000,12 @@ br {
   color: var(--color-eternity);
   background-color: var(--color-prestige--accent);
   border-color: var(--color-eternity);
+  cursor: pointer;
 }
 
 .o-eternity-button:hover {
   color: black;
   background-color: var(--color-eternity);
-  cursor: pointer;
 }
 
 .o-eternity-button span {

src/components/SliderComponent.vue

@@ -449,6 +449,11 @@ export default {
         position: "relative"
       }
     },
+    draggableStyle() {
+      return {
+        cursor: this.boolDisabled ? "default" : "pointer"
+      };
+    },
     dotStyles() {
       let ret = {
         width: this.dotWidthVal,
@@ -1031,7 +1036,8 @@ export default {
          :class="['l-ad-slider__wrap', stateClass]"
          :style="[wrapStyles, boolDisabled ? disabledStyle : null]"
          @click="wrapClick">
-      <div ref="elem" aria-hidden="true" :class="['l-ad-slider__bg', 'c-ad-slider__bg', bgClass]" :style="[elemStyles, bgStyle]"
+      <div ref="elem" aria-hidden="true" :class="['l-ad-slider__bg', 'c-ad-slider__bg', bgClass]"
+        :style="[elemStyles, bgStyle, draggableStyle]"
         @mousedown="moveStart($event, 0, true)"
         @touchstart="moveStart($event, 0, true)"
       >
@@ -1141,7 +1147,7 @@ export default {
         <div
           ref="process"
           :class="['l-ad-slider__process', 'c-ad-slider__process', { 'ad-slider-process-draggable': isRange && processDraggable }, processClass]"
-          :style="processStyle"
+          :style="[elemStyles, bgStyle, draggableStyle]"
           @click="processClick"
         >
           <div

src/components/tabs/celestial-enslaved/EnslavedTab.vue

@@ -31,6 +31,9 @@ export default {
     quote: "",
     currentSpeedUp: 0,
     hintsUnlocked: false,
+    canChangeStoreTime: false,
+    canChangeStoreRealTime: false,
+    canDischarge: false,
   }),
   computed: {
     storedRealEfficiencyDesc() {
@@ -67,6 +70,31 @@ export default {
     // Use this here since Enslaved has a fairly non-standard character, and SFCs don't support using \uf0c1
     enslavedSymbol: () => Enslaved.symbol,
     isDoomed: () => Pelle.isDoomed,
+    storeGameTimeClass() {
+      return {
+        "o-enslaved-mechanic-button": true,
+        "o-enslaved-mechanic-button--storing-time": this.isStoringBlackHole,
+        "l-fixed-setting": !this.canChangeStoreTime,
+        "o-pelle-disabled": this.isDoomed
+      };
+    },
+    storeRealTimeClass() {
+      return {
+        "o-enslaved-mechanic-button": true,
+        "o-enslaved-mechanic-button--clickable": !this.isDoomed,
+        "o-enslaved-mechanic-button--storing-time": this.isStoringReal,
+        "l-fixed-setting": !this.canChangeStoreRealTime,
+        "o-pelle-disabled": this.isDoomed
+      };
+    },
+    dischargeClass() {
+      return {
+        "o-enslaved-mechanic-button": true,
+        "o-enslaved-mechanic-button--clickable": !this.isDoomed,
+        "l-fixed-setting": !this.canDischarge,
+        "o-pelle-disabled": this.isDoomed
+      };
+    },
     doomedDisabledClass() {
       return { "o-pelle-disabled": this.isDoomed };
     },
@@ -102,6 +130,9 @@ export default {
       this.autoReleaseSpeed = Enslaved.isAutoReleasing ? Enslaved.autoReleaseSpeed : 0;
       this.currentSpeedUp = Enslaved.currentBlackHoleStoreAmountPerMs;
       this.hintsUnlocked = EnslavedProgress.hintsUnlocked.hasProgress;
+      this.canChangeStoreTime = Enslaved.canModifyGameTimeStorage;
+      this.canChangeStoreRealTime = Enslaved.canModifyRealTimeStorage;
+      this.canDischarge = Enslaved.canRelease(false);
     },
     toggleStoreBlackHole() {
       Enslaved.toggleStoreBlackHole();
@@ -225,8 +256,7 @@ export default {
             and the lost speed is converted into stored game time. Discharging the Black Hole allows you to skip
             forward in time. Stored game time is also used to unlock certain upgrades.
             <button
-              :class="[mechanicButtonClass,
-                       {'o-enslaved-mechanic-button--storing-time': isStoringBlackHole}]"
+              :class="storeGameTimeClass"
               @click="toggleStoreBlackHole"
             >
               <div
@@ -240,10 +270,10 @@ export default {
               </div>
             </button>
             <button
-              :class="mechanicButtonClass"
+              :class="dischargeClass"
               @click="useStored"
             >
-              <span :class="doomedDisabledClass">Discharge Black Hole</span>
+              <span>Discharge Black Hole</span>
               <p v-if="isRunning">
                 {{ timeDisplayShort(nerfedBlackHoleTime) }} in this Reality
               </p>
@@ -254,8 +284,7 @@ export default {
             You can use stored real time to "amplify" a Reality, simulating repeated runs of it.
             Amplified Realities give all the rewards that normal Realities do.
             <button
-              :class="[mechanicButtonClass, {'o-enslaved-mechanic-button--storing-time': isStoringReal},
-                       doomedDisabledClass]"
+              :class="storeRealTimeClass"
               @click="toggleStoreReal"
             >
               <div class="o-enslaved-stored-time">
@@ -309,4 +338,10 @@ export default {
 .c-enslaved-run-description-line {
   margin-bottom: 1rem;
 }
+
+.l-fixed-setting {
+  cursor: pointer;
+  pointer-events: none;
+  filter: brightness(70%);
+}
 </style>

src/components/tabs/glyphs/EquippedGlyphs.vue

@@ -46,6 +46,19 @@ export default {
     },
     isDoomed() {
       return Pelle.isDoomed;
+    },
+    glyphRespecStyle() {
+      if (this.respec) {
+        return {
+          color: "var(--color-reality-light)",
+          "background-color": "var(--color-reality)",
+          "border-color": "#094e0b",
+          cursor: "pointer",
+        };
+      }
+      return {
+        cursor: "pointer",
+      };
     }
   },
   created() {
@@ -162,7 +175,7 @@ export default {
     <div class="l-equipped-glyphs__buttons">
       <button
         class="l-glyph-equip-button c-reality-upgrade-btn"
-        :class="{'c-reality-upgrade-btn--bought': respec}"
+        :style="glyphRespecStyle"
         :ach-tooltip="respecTooltip"
         @click="toggleRespec"
       >

src/components/ui-modes/HeaderBlackHole.vue

@@ -1,4 +1,6 @@
 <script>
+import { Laitela } from "../../../javascripts/core/globals";
+
 import HeaderBlackHoleStatusText from "./HeaderBlackHoleStatusText";
 import PrimaryButton from "@/components/PrimaryButton";
 import PrimaryToggleButton from "@/components/PrimaryToggleButton";
@@ -21,6 +23,7 @@ export default {
       storedTime: 0,
       canAutoRelease: false,
       isAutoReleasing: false,
+      canChangePulse: false,
     };
   },
   computed: {
@@ -51,6 +54,7 @@ export default {
       this.storedTime = player.celestials.enslaved.stored;
       this.canAutoRelease = Ra.unlocks.adjustableStoredTime.canBeApplied;
       this.isAutoReleasing = player.celestials.enslaved.isAutoReleasing;
+      this.canChangePulse = !Laitela.isRunning;
     },
     pauseButtonText() {
       if (BlackHoles.arePaused && player.blackHoleNegative < 1) return "Uninvert BH";
@@ -63,9 +67,6 @@ export default {
     timeDisplayShort(ms) {
       return timeDisplayShort(ms);
     },
-    toggleAutoRelease() {
-      player.celestials.enslaved.isAutoReleasing = !player.celestials.enslaved.isAutoReleasing;
-    },
   }
 };
 </script>
@@ -114,10 +115,16 @@ export default {
     </span>
     <span v-if="canAutoRelease">
       <PrimaryToggleButton
+        v-if="canChangePulse"
         v-model="isAutoReleasing"
         class="o-primary-btn--buy-max c-primary-btn--black-hole-header"
         label="Pulse:"
       />
+      <!-- Odd formatting of this element is necessary to prevent extra spaces from being inserted -->
+      <span
+        v-else
+        class="o-primary-btn o-primary-btn--buy-max c-primary-btn--black-hole-header l-disabled-pulse"
+      >Pulse: Disabled</span>
     </span>
   </span>
 </template>
@@ -136,4 +143,10 @@ export default {
   font-size: 1rem;
   line-height: 1rem;
 }
+
+.l-disabled-pulse {
+  cursor: pointer;
+  pointer-events: none;
+  background: var(--color-disabled);
+}
 </style>