Hide centre container during big crunch

public/stylesheets/new-ui-styles.css

@@ -198,11 +198,11 @@ body.t-s9 {
 }
 
 .l-tab-btn-inner {
-  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
+  position: relative;
   justify-content: center;
   align-items: center;
   cursor: pointer;
@@ -364,8 +364,8 @@ body.t-s9 {
 
 .o-tab-btn--infinity .o-subtab__tooltip {
   color: var(--color-infinity);
-  border-color: var(--color-infinity);
   background: var(--color-prestige--accent);
+  border-color: var(--color-infinity);
 }
 
 .o-tab-btn--infinity .o-subtab__tooltip::after {
@@ -374,8 +374,8 @@ body.t-s9 {
 
 .o-tab-btn--eternity .o-subtab__tooltip {
   color: var(--color-eternity);
-  border-color: var(--color-eternity);
   background: var(--color-prestige--accent);
+  border-color: var(--color-eternity);
 }
 
 .o-tab-btn--eternity .o-subtab__tooltip::after {
@@ -384,8 +384,8 @@ body.t-s9 {
 
 .o-tab-btn--reality .o-subtab__tooltip {
   color: var(--color-reality);
-  border-color: var(--color-reality);
   background: var(--color-prestige--accent);
+  border-color: var(--color-reality);
 }
 
 .o-tab-btn--reality .o-subtab__tooltip::after {
@@ -394,8 +394,8 @@ body.t-s9 {
 
 .o-tab-btn--celestial .o-subtab__tooltip {
   color: var(--color-celestials);
-  border-color: var(--color-celestials);
   background: var(--color-prestige--accent);
+  border-color: var(--color-celestials);
 }
 
 .o-tab-btn--celestial .o-subtab__tooltip::after {
@@ -530,7 +530,6 @@ body.t-s9 {
 .btn-big-crunch--small {
   position: absolute;
   top: 4.3rem;
-  left: calc(50% - 0.6rem);
   font-size: 3rem;
   transform: translateX(-50%);
 }

public/stylesheets/old-ui.css

@@ -31,6 +31,9 @@
 
 .l-old-ui__big-crunch-btn--overlay {
   position: absolute;
+  left: 50%;
+  margin-top: 5rem;
+  transform: translateX(-50%);
 }
 
 .l-old-ui__page {

src/components/ui-modes/BigCrunchButton.vue

@@ -0,0 +1,69 @@
+<script>
+export default {
+  name: "BigCrunchButton",
+  data() {
+    return {
+      isModern: false,
+      smallCrunch: false,
+      shouldDisplay: false
+    };
+  },
+  methods: {
+    update() {
+      this.shouldDisplay = !player.break && Player.canCrunch;
+      if (!this.shouldDisplay) return;
+      this.isModern = player.options.newUI;
+      this.smallCrunch = Time.bestInfinityRealTime.totalMinutes <= 1;
+    },
+    handleClick() {
+      if (PlayerProgress.infinityUnlocked()) bigCrunchResetRequest();
+      else Modal.bigCrunch.show();
+    }
+  }
+};
+</script>
+
+<template>
+  <span v-if="shouldDisplay">
+    <div
+      v-if="isModern"
+      class="l-new-ui-big-crunch__container"
+    >
+      <h3 v-if="!smallCrunch">
+        The world has collapsed due to excess antimatter.
+      </h3>
+      <button
+        :class="{
+          'btn-big-crunch': true,
+          'btn-big-crunch--small': smallCrunch
+        }"
+        @click="handleClick"
+      >
+        Big Crunch
+      </button>
+    </div>
+    <div v-else>
+      <button
+        :class="{
+          'o-tab-btn': true,
+          'o-big-crunch-btn': true,
+          'l-old-ui__big-crunch-btn': true,
+          'l-old-ui__big-crunch-btn--overlay': smallCrunch
+        }"
+        @click="handleClick"
+      >
+        Big Crunch
+      </button>
+      <div
+        v-if="!smallCrunch"
+        class="o-emptiness"
+      >
+        The world has collapsed due to excess of antimatter.
+      </div>
+    </div>
+  </span>
+</template>
+
+<style scoped>
+
+</style>

src/components/ui-modes/classic/ClassicBigCrunchButton.vue

@@ -1,24 +0,0 @@
-<script>
-export default {
-  name: "ClassicBigCrunchButton",
-  methods: {
-    handleClick() {
-      if (PlayerProgress.infinityUnlocked()) manualBigCrunchResetRequest();
-      else Modal.bigCrunch.show();
-    }
-  }
-};
-</script>
-
-<template>
-  <button
-    class="o-tab-btn o-big-crunch-btn"
-    @click="handleClick"
-  >
-    Big Crunch
-  </button>
-</template>
-
-<style scoped>
-
-</style>

src/components/ui-modes/classic/ClassicUi.vue

@@ -1,8 +1,9 @@
 <script>
+import BigCrunchButton from "../BigCrunchButton";
 import GameHeader from "../GameHeader";
 import NewsTicker from "../NewsTicker";
 
-import ClassicBigCrunchButton from "./ClassicBigCrunchButton";
+
 import ClassicSubtabBar from "./ClassicSubtabBar";
 import ClassicTabBar from "./ClassicTabBar";
 import EternityPointsHeader from "@/components/EternityPointsHeader";
@@ -12,12 +13,12 @@ export default {
   name: "ClassicUi",
   components: {
     GameHeader,
-    ClassicBigCrunchButton,
     ClassicSubtabBar,
     ClassicTabBar,
     NewsTicker,
     InfinityPointsHeader,
-    EternityPointsHeader
+    EternityPointsHeader,
+    BigCrunchButton
   },
   data() {
     return {
@@ -34,9 +35,7 @@ export default {
   methods: {
     update() {
       const crunchButtonVisible = !player.break && Player.canCrunch;
-      const reachedInfinityInMinute = Time.bestInfinityRealTime.totalMinutes <= 1;
-      this.bigCrunch = crunchButtonVisible && !reachedInfinityInMinute;
-      this.smallCrunch = crunchButtonVisible && reachedInfinityInMinute;
+      this.bigCrunch = crunchButtonVisible && Time.bestInfinityRealTime.totalMinutes > 1;
     }
   },
 };
@@ -52,13 +51,8 @@ export default {
       type="text/css"
       href="stylesheets/old-ui.css"
     >
-    <template v-if="bigCrunch">
-      <ClassicBigCrunchButton class="l-old-ui__big-crunch-btn" />
-      <div class="o-emptiness">
-        The world has collapsed due to excess of antimatter.
-      </div>
-    </template>
-    <template v-else>
+    <BigCrunchButton />
+    <template v-if="!bigCrunch">
       <NewsTicker
         v-if="news"
         class="l-old-ui__news-bar"
@@ -70,10 +64,6 @@ export default {
         v-if="tab.config.before"
       />
       <ClassicSubtabBar />
-      <ClassicBigCrunchButton
-        v-show="smallCrunch"
-        class="l-old-ui__big-crunch-btn l-old-ui__big-crunch-btn--overlay"
-      />
       <div class="l-old-ui__page">
         <slot />
       </div>

src/components/ui-modes/modern/ModernUi.vue

@@ -1,4 +1,5 @@
 <script>
+import BigCrunchButton from "../BigCrunchButton";
 import HeaderBlackHole from "../HeaderBlackHole";
 import HeaderChallengeDisplay from "../HeaderChallengeDisplay";
 import HeaderChallengeEffects from "../HeaderChallengeEffects";
@@ -9,6 +10,7 @@ import NewsTicker from "../NewsTicker";
 export default {
   name: "ModernUi",
   components: {
+    BigCrunchButton,
     HeaderChallengeDisplay,
     HeaderChallengeEffects,
     NewsTicker,
@@ -17,8 +19,7 @@ export default {
   },
   data() {
     return {
-      bigCrunch: false,
-      smallCrunch: false,
+      bigCrunch: false
     };
   },
   computed: {
@@ -32,9 +33,7 @@ export default {
   methods: {
     update() {
       const crunchButtonVisible = !player.break && Player.canCrunch;
-      const reachedInfinityInMinute = Time.bestInfinityRealTime.totalMinutes <= 1;
-      this.bigCrunch = crunchButtonVisible && !reachedInfinityInMinute;
-      this.smallCrunch = crunchButtonVisible && reachedInfinityInMinute;
+      this.bigCrunch = crunchButtonVisible && Time.bestInfinityRealTime.totalMinutes > 1;
     },
     handleClick() {
       if (PlayerProgress.infinityUnlocked()) manualBigCrunchResetRequest();
@@ -56,20 +55,9 @@ export default {
       :style="topMargin"
     >
       <NewsTicker v-if="news" />
+      <BigCrunchButton />
       <div
-        v-if="bigCrunch"
-        class="l-new-ui-big-crunch__container"
-      >
-        <h3>The world has collapsed due to excess antimatter.</h3>
-        <button
-          class="btn-big-crunch"
-          @click="handleClick"
-        >
-          Big Crunch
-        </button>
-      </div>
-      <div
-        v-else
+        v-if="!bigCrunch"
         class="tab-container"
       >
         <HeaderPrestigeGroup />
@@ -78,13 +66,6 @@ export default {
           <HeaderChallengeEffects />
           <HeaderBlackHole />
         </div>
-        <button
-          v-if="smallCrunch && !bigCrunch"
-          class="btn-big-crunch btn-big-crunch--small"
-          onclick="manualBigCrunchResetRequest()"
-        >
-          Big Crunch
-        </button>
         <slot />
       </div>
     </div>

src/components/ui-modes/prestige-header/HeaderCenterContainer.vue

@@ -19,6 +19,7 @@ export default {
   },
   data() {
     return {
+      shouldDisplay: true,
       isModern: false,
       hasRealityButton: false,
       isDoomed: false,
@@ -28,6 +29,9 @@ export default {
   },
   methods: {
     update() {
+      this.shouldDisplay = player.break || !Player.canCrunch;
+      if (!this.shouldDisplay) return;
+
       this.isModern = player.options.newUI;
       this.isDoomed = Pelle.isDoomed;
       this.antimatter.copyFrom(Currency.antimatter);
@@ -39,7 +43,10 @@ export default {
 </script>
 
 <template>
-  <div class="c-prestige-button-container">
+  <div
+    v-if="shouldDisplay"
+    class="c-prestige-button-container"
+  >
     <span>You have <span class="c-game-header__antimatter">{{ format(antimatter, 2, 1) }}</span> antimatter.</span>
     <div
       v-if="hasRealityButton"