Fix H2P glow, combine top-right button components

public/stylesheets/new-ui-styles.css

@@ -964,15 +964,6 @@ body.t-s12 {
   border: var(--var-border-width, 0.2rem) solid rgba(0, 0, 0, 40%);
 }
 
-.l-help-me {
-  height: 2rem;
-  position: absolute;
-  top: 4.9rem;
-  font-size: 1.5rem;
-  border-radius: var(--var-border-radius, 50%);
-  transition-delay: 0s;
-}
-
 .l-information {
   top: 7rem;
 }

public/stylesheets/styles.css

@@ -8983,21 +8983,6 @@ input.o-automator-block-input {
   border-bottom: 0.1rem solid black;
 }
 
-.l-help-me {
-  width: 2rem;
-  height: 2rem;
-  position: absolute;
-  top: 1rem;
-  right: 2rem;
-  z-index: 1;
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.9rem;
-  border-radius: var(--var-border-radius, 50%);
-  pointer-events: auto;
-  cursor: pointer;
-}
-
 .l-information {
   top: 3.1rem;
 }

src/components/GameUiComponentFixed.vue

@@ -4,7 +4,6 @@ import CelestialQuoteModal from "@/components/modals/celestial-quotes/CelestialQ
 import CreditsContainer from "@/components/tabs/celestial-pelle/CreditsContainer";
 import FadeAway from "@/components/tabs/celestial-pelle/FadeAway";
 import HowToPlay from "@/components/HowToPlay";
-import InfoButton from "@/components/InfoButton";
 import ModalProgressBar from "@/components/modals/ModalProgressBar";
 import ModernSidebar from "@/components/ui-modes/modern/ModernSidebar";
 import NewGame from "@/components/tabs/celestial-pelle/NewGame";
@@ -18,7 +17,6 @@ export default {
   name: "GameUiComponentFixed",
   components: {
     HowToPlay,
-    InfoButton,
     TimeTheoremShop,
     ModernSidebar,
     SaveTimer,
@@ -67,7 +65,6 @@ export default {
       class="l-notification-container"
     />
     <HowToPlay :style="hideIfMatoFullscreen" />
-    <InfoButton :style="hideIfMatoFullscreen" />
     <TimeTheoremShop
       v-if="view.subtab === 'studies'"
       class="l-time-studies-tab__tt-shop"

src/components/HowToPlay.vue

@@ -4,22 +4,31 @@ export default {
   data() {
     return {
       hasTutorial: false,
+      isModern: false,
     };
   },
   computed: {
-    classObject() {
+    h2pClassObject() {
       return {
         "o-tab-btn l-help-me": true,
-        "h2p-tutorial--glow": this.hasTutorial,
+      };
+    },
+    topMargin() {
+      return {
+        "margin-top": this.isModern ? "4.5rem" : "1rem",
       };
     }
   },
   methods: {
     update() {
       this.hasTutorial = Tutorial.emphasizeH2P();
+      this.isModern = player.options.newUI;
     },
-    showModal() {
+    showH2P() {
       Modal.h2p.show();
+    },
+    showInfo() {
+      Modal.information.show();
     }
   }
 };
@@ -28,8 +37,9 @@ export default {
 <template>
   <div>
     <div
-      :class="classObject"
-      @click="showModal"
+      :class="h2pClassObject"
+      :style="topMargin"
+      @click="showH2P"
     >
       ?
       <div
@@ -39,20 +49,46 @@ export default {
         Click for info
       </div>
     </div>
+    <div
+      v-if="hasTutorial"
+      class="h2p-tutorial--glow"
+      :style="topMargin"
+    />
+    <div
+      class="o-tab-btn l-information l-help-me"
+      @click="showInfo"
+    >
+      i
+    </div>
   </div>
 </template>
 
 <style scoped>
-.h2p-tutorial--glow::after {
+.l-help-me {
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  right: 2rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.9rem;
+  border-radius: var(--var-border-radius, 50%);
+  pointer-events: auto;
+  cursor: pointer;
+  transition-delay: 0s;
+  z-index: 1;
+}
+
+.h2p-tutorial--glow {
   position: absolute;
-  content: "";
-  width: 100%;
-  height: 100%;
   top: 0;
-  left: 0;
+  right: 2rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--var-border-radius, 50%);
   background: gold;
-  border-radius: var(--var-border-radius, inherit);
   animation: a-opacity 3s infinite;
+  z-index: 2;
 }
 
 .h2p-tooltip {
@@ -64,7 +100,7 @@ export default {
   background: black;
   border: 0.1rem solid var(--color-text);
   border-radius: var(--var-border-width, 0.5rem);
-  transform: translate(-0.7rem, -0.5rem);
+  transform: translate(-0.7rem, -0.4rem);
   padding: 0.2rem 0.4rem;
 }
 

src/components/InfoButton.vue

@@ -1,23 +0,0 @@
-<script>
-export default {
-  name: "InfoButton",
-  methods: {
-    showModal() {
-      Modal.information.show();
-    }
-  }
-};
-</script>
-
-<template>
-  <div
-    class="o-tab-btn l-information l-help-me"
-    @click="showModal"
-  >
-    i
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/core/tutorial.js

@@ -7,7 +7,8 @@ export const TUTORIAL_STATE = {
   AUTOMATOR: 5
 };
 
-// Tutorial has two ways of moving on, either by Tutorial.moveOn() or by having it's condition be true
+// Tutorial has two ways of moving on, either by Tutorial.moveOn() or by having it's condition be true. This
+// is checked by moving on when the NEXT state's condition evaluates to true
 const tutorialStates = [
   {
     // Highlight the 1st dim button
@@ -44,9 +45,10 @@ export const Tutorial = {
   },
 
   // This will remain visible until the first dimboost is purchased. However, since the tutorial state generally
-  // only updates whenever the UI elements need changing, we need to explicitly check resources here
+  // only visually updates whenever the UI elements need changing, we need to explicitly check boost count or else
+  // this will remain visible until a galaxy can be purchased
   emphasizeH2P() {
-    const hasFirstBoost = Achievement(14).isUnlocked && player.dimensionBoosts > 0;
+    const hasFirstBoost = player.tutorialState > TUTORIAL_STATE.DIMBOOST || player.dimensionBoosts > 0;
     return player.records.fullGameCompletions === 0 && !hasFirstBoost;
   },