Fix header bugs, fixes #3089, fixes #3103

public/stylesheets/styles.css

@@ -2304,6 +2304,7 @@ br {
   justify-content: center;
   align-items: center;
   font-size: 1.2rem;
+  margin: 0.5rem;
 }
 
 .l-game-header__buttons-line {

src/components/ui-modes/GameHeader.vue

@@ -4,6 +4,8 @@ import HeaderChallengeDisplay from "./HeaderChallengeDisplay";
 import HeaderChallengeEffects from "./HeaderChallengeEffects";
 import HeaderPrestigeGroup from "./HeaderPrestigeGroup";
 
+import GameSpeedDisplay from "@/components/GameSpeedDisplay";
+
 export default {
   name: "GameHeader",
   components: {
@@ -11,6 +13,17 @@ export default {
     HeaderChallengeEffects,
     HeaderBlackHole,
     HeaderPrestigeGroup,
+    GameSpeedDisplay,
+  },
+  data() {
+    return {
+      hasReality: false,
+    };
+  },
+  methods: {
+    update() {
+      this.hasReality = PlayerProgress.realityUnlocked();
+    },
   },
 };
 </script>
@@ -20,6 +33,8 @@ export default {
     <HeaderChallengeDisplay />
     <HeaderChallengeEffects />
     <HeaderPrestigeGroup />
+    <GameSpeedDisplay v-if="hasReality" />
+    <br v-if="hasReality">
     <HeaderBlackHole />
   </div>
 </template>

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

@@ -6,6 +6,8 @@ import HeaderChallengeEffects from "../HeaderChallengeEffects";
 import HeaderPrestigeGroup from "../HeaderPrestigeGroup";
 import NewsTicker from "../NewsTicker";
 
+import GameSpeedDisplay from "@/components/GameSpeedDisplay";
+
 
 export default {
   name: "ModernUi",
@@ -15,11 +17,13 @@ export default {
     HeaderChallengeEffects,
     NewsTicker,
     HeaderBlackHole,
-    HeaderPrestigeGroup
+    HeaderPrestigeGroup,
+    GameSpeedDisplay,
   },
   data() {
     return {
-      bigCrunch: false
+      bigCrunch: false,
+      hasReality: false,
     };
   },
   computed: {
@@ -34,6 +38,7 @@ export default {
     update() {
       const crunchButtonVisible = !player.break && Player.canCrunch;
       this.bigCrunch = crunchButtonVisible && Time.bestInfinityRealTime.totalMinutes > 1;
+      this.hasReality = PlayerProgress.realityUnlocked();
     },
     handleClick() {
       if (PlayerProgress.infinityUnlocked()) manualBigCrunchResetRequest();
@@ -64,6 +69,8 @@ export default {
         <div class="information-header">
           <HeaderChallengeDisplay />
           <HeaderChallengeEffects />
+          <GameSpeedDisplay v-if="hasReality" />
+          <br v-if="hasReality">
           <HeaderBlackHole />
         </div>
         <slot />