Address issue feedback

Move Armageddon button back into pelle upgrades
2024-11-22 12:11:58 +00:00 · 2022-03-24 11:35:19 +08:00 · 2022-03-24 11:35:19 +08:00 · 25d7495691
commit 25d7495691
parent b999286292
6 changed files with 111 additions and 123 deletions
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@ -9481,3 +9481,8 @@ input.o-automator-block-input {
  background-color: var(--color-pelle--base);
  filter: grayscale(50%);
 }
+
+.l-fill-container {
+  width: 100%;
+  height: 100%;
+}
--- a/src/components/tabs/celestial-pelle/PelleRiftBar.vue
+++ b/src/components/tabs/celestial-pelle/PelleRiftBar.vue
@ -200,7 +200,7 @@ export default {

 .l-overflow-hidden {
  overflow: hidden;
-  border: 0.17rem solid transparent;
+  border: 0.16rem solid transparent;
  width: 32rem;
  height: 5rem;
  border-radius: 0.5rem;
--- a/src/components/tabs/celestial-pelle/PelleTab.vue
+++ b/src/components/tabs/celestial-pelle/PelleTab.vue
@ -1,19 +1,15 @@
 <script>
-import ArmageddonButton from "./ArmageddonButton";
 import PelleBarPanel from "./PelleBarPanel";
 import PelleUpgradePanel from "./PelleUpgradePanel";
 import GalaxyGeneratorPanel from "./PelleGalaxyGeneratorPanel";
-import RemnantGainFactor from "./RemnantGainFactor";
 import CelestialQuoteHistory from "@/components/CelestialQuoteHistory";

 export default {
  name: "PelleTab",
  components: {
-    ArmageddonButton,
    PelleBarPanel,
    PelleUpgradePanel,
    GalaxyGeneratorPanel,
-    RemnantGainFactor,
    CelestialQuoteHistory
  },
  data() {
@ -21,14 +17,10 @@ export default {
      isDoomed: false,
      canEnterPelle: false,
      completedRows: 0,
-      remnants: 0,
-      realityShards: new Decimal(0),
-      shardRate: new Decimal(0),
      hasStrike: false,
      hasGalaxyGenerator: false,
      remnantsGain: 0,
-      realityShardGain: new Decimal(0),
-      isHovering: false
+      realityShardGain: new Decimal(0)
    };
  },
  computed: {
@ -43,9 +35,6 @@ export default {
        this.canEnterPelle = Achievements.prePelle.every(a => a.isUnlocked);
        this.completedRows = Achievements.prePelleRows.countWhere(r => r.every(a => a.isUnlocked));
      }
-      this.remnants = Pelle.cel.remnants;
-      this.realityShards.copyFrom(Pelle.cel.realityShards);
-      this.shardRate.copyFrom(Pelle.realityShardGainPerSecond);
      this.hasStrike = PelleStrikes.all.some(s => s.hasStrike);
      this.hasGalaxyGenerator = PelleRifts.war.milestones[2].canBeApplied || GalaxyGenerator.spentGalaxies > 0;
    },
@ -84,30 +73,9 @@ export default {
        </button>
      </div>
      <br>
-      <div class="c-armageddon-container">
-        <div>
-          <div
-            class="c-armageddon-button-container"
-            @mouseover="isHovering = true"
-            @mouseleave="isHovering = false"
-          >
-            <ArmageddonButton />
-          </div>
-          <RemnantGainFactor />
-        </div>
-        <div class="c-armageddon-resources-container">
-          <div>
-            You have <span class="c-remnants-amount">{{ format(remnants, 2) }}</span> Remnants.
-          </div>
-          <div>
-            You have <span class="c-remnants-amount">{{ format(realityShards, 2) }}</span> Reality Shards.
-            <span class="c-remnants-amount">+{{ format(shardRate, 2, 2) }}/s</span>
-          </div>
-        </div>
-      </div>
      <GalaxyGeneratorPanel v-if="hasGalaxyGenerator" />
      <PelleBarPanel v-if="hasStrike" />
-      <PelleUpgradePanel :is-hovering="isHovering" />
+      <PelleUpgradePanel />
    </div>
    <button
      v-else-if="canEnterPelle"
@ -233,35 +201,7 @@ export default {
  align-self: center;
 }

-.c-armageddon-container {
-  align-self: center;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  border-radius: 0.5rem;
-  border: 0.2rem solid var(--color-pelle--base);
-  padding: 1rem;
-  background-color: #1a1a1a;
-  color: #888888;
-}
-
-.c-armageddon-button-container {
-  width: 32rem;
-  margin-bottom: 0.5rem;
-}
-
-.c-armageddon-resources-container {
-  width: 41.5rem;
-}
-
-.c-remnants-amount {
-  font-weight: bold;
-  font-size: 2rem;
-  color: var(--color-pelle--base);
-}
-
-
-.s-base--metro .l-pelle-panel-container, .s-base--metro .c-armageddon-container {
+.s-base--metro .l-pelle-panel-container {
  border-radius: 0;
 }

--- a/src/components/tabs/celestial-pelle/PelleUpgrade.vue
+++ b/src/components/tabs/celestial-pelle/PelleUpgrade.vue
@ -1,12 +1,14 @@
 <script>
-import CostDisplay from "../../CostDisplay";
-import DescriptionDisplay from "../../DescriptionDisplay";
+import CostDisplay from "@/components/CostDisplay";
+import CustomizeableTooltip from "@/components/CustomizeableTooltip.vue";
+import DescriptionDisplay from "@/components/DescriptionDisplay";

 export default {
  name: "PelleUpgrade",
  components: {
    DescriptionDisplay,
-    CostDisplay
+    CostDisplay,
+    CustomizeableTooltip
  },
  props: {
    upgrade: {
@ -55,7 +57,6 @@ export default {
    timeEstimate() {
      if (this.canBuy ||
        this.isBought ||
-        Pelle.realityShardGainPerSecond.eq(0) ||
        this.isCapped ||
        this.galaxyGenerator
      ) return null;
@ -64,7 +65,6 @@ export default {
    shouldEstimateImprovement() {
      return !(this.canBuy ||
        this.isBought ||
-        Pelle.realityShardGainPerSecond.eq(0) ||
        this.isCapped ||
        this.galaxyGenerator
      );
@ -113,17 +113,29 @@ export default {
      'c-pelle-upgrade--faded': faded,
      'c-pelle-upgrade--galaxyGenerator': galaxyGenerator
    }"
-    :ach-tooltip="timeEstimate"
    @click="!faded && upgrade.purchase()"
    @mouseover="hovering = true"
    @mouseleave="hovering = false"
  >
-    <div
-      :style="estimateImprovementTooltipStyle"
-      class="c-pelle-upgrade-time-tooltip"
+    <CustomizeableTooltip
+      :show="showImprovedEstimate && shouldEstimateImprovement"
+      left="50%"
+      top="0"
    >
-      {{ estimateImprovement }}
-    </div>
+      <template #tooltipContent>
+        {{ estimateImprovement }}
+      </template>
+    </CustomizeableTooltip>
+    <CustomizeableTooltip
+      left="50%"
+      top="0"
+      class="l-fill-container"
+      content-class="l-fill-container"
+    >
+      <template #tooltipContent>
+        {{ timeEstimate }}
+      </template>
+    </CustomizeableTooltip>
    <DescriptionDisplay :config="config" />
    <div class="l-pelle-upgrade-gap" />
    <div v-if="effectText">
@ -198,41 +210,6 @@ export default {
  transition-duration: 0.3s;
 }

-.c-pelle-upgrade-time-tooltip {
-  position: absolute;
-  visibility: visible;
-  bottom: 100%;
-  left: 50%;
-  margin-bottom: 0.5rem;
-  margin-left: -8.35rem;
-  padding: 0.7rem;
-  width: 16rem;
-  border-radius: 0.3rem;
-  background-color: hsla(0, 0%, 5%, 0.9);
-  color: #fff;
-  content: attr(ach-tooltip);
-  text-align: center;
-  font-size: 1.4rem;
-  line-height: 1.2;
-  transition-duration: 0.4s;
-  z-index: 3;
-}
-
-.c-pelle-upgrade-time-tooltip:after {
-  position: absolute;
-  bottom: -0.5rem;
-  left: 50%;
-  margin-left: -0.5rem;
-  width: 0;
-  border-top: 0.5rem solid hsla(0, 0%, 5%, 0.9);
-  border-right: 0.5rem solid transparent;
-  border-left: 0.5rem solid transparent;
-  content: " ";
-  font-size: 0;
-  line-height: 0;
-  transition-duration: 0.4s;
-}
-
 .l-pelle-upgrade-gap {
  height: 0.5em;
  flex-shrink: 0;
--- a/src/components/tabs/celestial-pelle/PelleUpgradePanel.vue
+++ b/src/components/tabs/celestial-pelle/PelleUpgradePanel.vue
@ -1,21 +1,23 @@
 <script>
+import ArmageddonButton from "./ArmageddonButton";
 import PelleUpgradeVue from "./PelleUpgrade";
+import RemnantGainFactor from "./RemnantGainFactor";

 export default {
  name: "PelleUpgradePanel",
  components: {
+    ArmageddonButton,
    PelleUpgradeVue,
-  },
-  props: {
-    isHovering: {
-      type: Boolean,
-      required: true
-    }
+    RemnantGainFactor,
  },
  data() {
    return {
      showBought: false,
      isCollapsed: false,
+      isHovering: false,
+      remnants: 0,
+      realityShards: new Decimal(0),
+      shardRate: new Decimal(0),
    };
  },
  computed: {
@ -35,11 +37,17 @@ export default {
      upgrades = upgrades.concat(this.visibleUpgrades);
      return upgrades;
    },
+    showImprovedEstimate() {
+      return this.isHovering && !this.shardRate.eq(0);
+    }
  },
  methods: {
    update() {
      this.showBought = Pelle.cel.showBought;
      this.isCollapsed = player.celestials.pelle.collapsed.upgrades;
+      this.remnants = Pelle.cel.remnants;
+      this.realityShards.copyFrom(Pelle.cel.realityShards);
+      this.shardRate.copyFrom(Pelle.realityShardGainPerSecond);
    },
    toggleBought() {
      Pelle.cel.showBought = !Pelle.cel.showBought;
@ -66,12 +74,33 @@ export default {
      v-if="!isCollapsed"
      class="l-pelle-content-container"
    >
+      <div class="c-armageddon-container">
+        <div>
+          <div
+            class="c-armageddon-button-container"
+            @mouseover="isHovering = true"
+            @mouseleave="isHovering = false"
+          >
+            <ArmageddonButton />
+          </div>
+          <RemnantGainFactor :less-opaque="showImprovedEstimate" />
+        </div>
+        <div class="c-armageddon-resources-container">
+          <div>
+            You have <span class="c-remnants-amount">{{ format(remnants, 2) }}</span> Remnants.
+          </div>
+          <div>
+            You have <span class="c-remnants-amount">{{ format(realityShards, 2) }}</span> Reality Shards.
+            <span class="c-remnants-amount">+{{ format(shardRate, 2, 2) }}/s</span>
+          </div>
+        </div>
+      </div>
      <div class="c-pelle-upgrade-container">
        <PelleUpgradeVue
          v-for="upgrade in rebuyables"
          :key="upgrade.config.id + '-pelle-rebuyable-upgrade'"
          :upgrade="upgrade"
-          :show-improved-estimate="isHovering"
+          :show-improved-estimate="showImprovedEstimate"
        />
      </div>
      <button
@ -157,13 +186,41 @@ export default {
  max-width: 110rem;
 }

+.c-armageddon-container {
+  align-self: center;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  border-radius: 0.5rem;
+  border: 0.2rem solid var(--color-pelle--base);
+  padding: 1rem;
+}
+
+.c-armageddon-button-container {
+  width: 32rem;
+  margin-bottom: 0.5rem;
+}
+
+.c-armageddon-resources-container {
+  width: 41.5rem;
+}
+
+.c-remnants-amount {
+  font-weight: bold;
+  font-size: 2rem;
+  color: var(--color-pelle--base);
+}
+
 .c-collapse-icon-clickable {
  cursor: pointer;
 }
-</style>

-<style>
+
 .s-base--metro .o-pelle-button {
  border-radius: 0;
 }
+
+.s-base--metro .c-armageddon-container {
+  border-radius: 0;
+}
 </style>
--- a/src/components/tabs/celestial-pelle/RemnantGainFactor.vue
+++ b/src/components/tabs/celestial-pelle/RemnantGainFactor.vue
@ -6,6 +6,13 @@ export default {
  components: {
    ExpandingControlBox
  },
+  props: {
+    lessOpaque: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
  data() {
    return {
      best: {
@ -36,6 +43,9 @@ export default {
    <ExpandingControlBox
      container-class="c-remnant-factors"
      label="Remnant Gain Factors"
+      :style="{
+        opacity: lessOpaque ? 0.2 : 1
+      }"
    >
      <template #dropdown>
        <div class="c-remnant-factors-text">
@ -116,13 +126,12 @@ export default {

 <style>
 .c-remnant-factors-container {
+  position: relative;
  z-index: 4;
 }

-/* I'm not sure why this bit is needed, but z-index on c-remnant-factors-container
-and c-remnant-factors both didn't work. If anyone can fix this it would be great. */
-.c-remnant-factors-container > .l-expanding-control-box {
-  z-index: 4;
+.c-remnant-factors-container .l-expanding-control-box {
+  transition: opacity 0.5s;
 }

 .c-remnant-factors {