Rename ID Display to Info Display

Also move alchemy hint text to Info Display.

index.html

@@ -352,7 +352,7 @@
 <script type="text/javascript" src="javascripts/components/modals/options/modal-options.js"></script>
 <script type="text/javascript" src="javascripts/components/modals/options/modal-animation-options.js"></script>
 <script type="text/javascript" src="javascripts/components/modals/options/modal-confirmation-options.js"></script>
-<script type="text/javascript" src="javascripts/components/modals/options/modal-id-display-options.js"></script>
+<script type="text/javascript" src="javascripts/components/modals/options/modal-info-display-options.js"></script>
 <script type="text/javascript" src="javascripts/components/modals/cloud/modal-cloud-conflict-record.js"></script>
 <script type="text/javascript" src="javascripts/components/modals/cloud/modal-cloud-load-conflict.js"></script>
 <script type="text/javascript" src="javascripts/components/modals/cloud/modal-cloud-save-conflict.js"></script>

javascripts/components/celestials/subtabs/ra/alchemy-circle-node.js

@@ -10,7 +10,6 @@ Vue.component("alchemy-circle-node", {
       isReactionActive: false,
       amount: 0,
       flow: 0,
-      alwaysShowResource: false,
       isUnlocked: false
     };
   },
@@ -48,7 +47,6 @@ Vue.component("alchemy-circle-node", {
       this.amount = this.resource.amount;
       this.flow = this.resource.flow;
       this.isUnlocked = this.resource.isUnlocked;
-      this.alwaysShowResource = player.options.showAlchemyResources;
     }
   },
   template: `
@@ -64,11 +62,7 @@ Vue.component("alchemy-circle-node", {
         :classObject="classObject"
       />
       <span v-if="isUnlocked">
-        <div v-if="alwaysShowResource"
-          class="o-alchemy-node-resource--always-visible">
-          {{ amount.toFixed(1) }}
-        </div>
-        <hint-text type="alchemy" v-else
+        <hint-text type="alchemy"
           :class="hintClassObject"
           class="o-hint-text--alchemy-node l-hint-text--alchemy-node">
           {{ amount.toFixed(1) }}

javascripts/components/celestials/subtabs/ra/alchemy-tab.js

@@ -76,7 +76,6 @@ Vue.component("alchemy-tab", {
       infoResourceId: 0,
       focusedResourceId: -1,
       realityCreationAvailable: false,
-      alwaysShowResource: false,
       reactionProgress: 0,
       estimatedCap: 0,
     };
@@ -102,7 +101,6 @@ Vue.component("alchemy-tab", {
   methods: {
     update() {
       this.realityCreationAvailable = AlchemyResource.reality.amount !== 0;
-      this.alwaysShowResource = player.options.showAlchemyResources;
       const animationTime = 800;
       this.reactionProgress = (player.realTimePlayed % animationTime) / animationTime;
       this.estimatedCap = estimatedAlchemyCap();
@@ -192,9 +190,6 @@ Vue.component("alchemy-tab", {
         "o-alchemy-reaction-arrow--focused": this.isFocusedReaction(reactionArrow),
       };
     },
-    toggleResourceVisibility() {
-      player.options.showAlchemyResources = !player.options.showAlchemyResources;
-    },
     showAlchemyHowTo() {
       Modal.message.show("You can now refine glyphs using \"Alchemy Mode\" in the glyph auto-sacrifice settings. " +
         "Refined glyphs will give an amount of their alchemy resources based on their level and rarity. Alchemy " +
@@ -214,14 +209,6 @@ Vue.component("alchemy-tab", {
     `<div class="l-ra-alchemy-tab">
       <div @click="showAlchemyHowTo()" class="o-primary-btn">Click for alchemy info</div>
       <alchemy-resource-info :key="infoResourceId" :resource="infoResource" />
-      <div>
-        <input type="checkbox"
-          id="alwaysShowResourceBox"
-          v-model="alwaysShowResource"
-          :value="alwaysShowResource"
-          @input="toggleResourceVisibility()">
-        <label for="alwaysShowResourceBox">Always show resource totals</label>
-      </div>
       Resource cap, based on last 10 realities: {{ shorten(estimatedCap, 3, 2) }}
       <div class="l-alchemy-circle" :style="circleStyle">
         <svg class="l-alchemy-orbit-canvas">

javascripts/components/modals/options/modal-info-display-options.js

@@ -1,6 +1,6 @@
 "use strict";
 
-Vue.component("modal-id-display-options", {
+Vue.component("modal-info-display-options", {
   mixins: [modalOptionsMixin],
   data() {
     return {
@@ -9,6 +9,7 @@ Vue.component("modal-id-display-options", {
       studies: false,
       realityUpgrades: false,
       perks: false,
+      alchemy: false,
     };
   },
   watch: {
@@ -27,6 +28,9 @@ Vue.component("modal-id-display-options", {
     perks(newValue) {
       player.options.showHintText.perks = newValue;
     },
+    alchemy(newValue) {
+      player.options.showHintText.alchemy = newValue;
+    },
   },
   methods: {
     update() {
@@ -36,15 +40,17 @@ Vue.component("modal-id-display-options", {
       this.studies = options.studies;
       this.realityUpgrades = options.realityUpgrades;
       this.perks = options.perks;
+      this.alchemy = options.alchemy;
     }
   },
   template:
     `<modal-options @close="emitClose">
-      <on-off-button v-model="achievements" text="Achievements:"/>
-      <on-off-button v-if="infinityUnlocked" v-model="challenges" text="Challenges:"/>
-      <on-off-button v-if="eternityUnlocked" v-model="studies" text="Time Studies:"/>
-      <on-off-button v-if="realityUnlocked" v-model="realityUpgrades" text="Reality Upgrades:"/>
-      <on-off-button v-if="realityUnlocked" v-model="perks" text="Perks:"/>
-      Note: IDs will always display when holding shift.
+      <on-off-button v-model="achievements" text="Achievement IDs:"/>
+      <on-off-button v-if="infinityUnlocked" v-model="challenges" text="Challenge IDs:"/>
+      <on-off-button v-if="eternityUnlocked" v-model="studies" text="Time Study IDs:"/>
+      <on-off-button v-if="realityUnlocked" v-model="realityUpgrades" text="Reality Upgrade IDs:"/>
+      <on-off-button v-if="realityUnlocked" v-model="perks" text="Perk IDs:"/>
+      <on-off-button v-if="alchemyUnlocked" v-model="alchemy" text="Alchemy resource amounts:"/>
+      Note: All types of additional info above will always display when holding shift.
     </modal-options>`
 });

javascripts/components/modals/options/modal-options.js

@@ -11,10 +11,11 @@ Vue.component("modal-options", {
 const modalOptionsMixin = {
   data() {
     return {
-      bigCrunchUnlocked: false,
+      infinityhUnlocked: false,
       eternityUnlocked: false,
       realityUnlocked: false,
       dilationUnlocked: false,
+      alchemyUnlocked: false,
       animatedThemeUnlocked: false
     };
   },
@@ -25,6 +26,7 @@ const modalOptionsMixin = {
       this.eternityUnlocked = progress.isEternityUnlocked;
       this.realityUnlocked = progress.isRealityUnlocked;
       this.dilationUnlocked = progress.isRealityUnlocked || player.dilation.tachyonParticles.neq(0);
+      this.alchemyUnlocked = Ra.has(RA_UNLOCKS.GLYPH_ALCHEMY);
       this.animatedThemeUnlocked = Themes.find("S1").isAvailable() || Themes.find("S6").isAvailable();
     }
   },

javascripts/components/options/options-button-grid.js

@@ -188,8 +188,8 @@ Vue.component("options-button-grid", {
       <div class="l-options-grid__row">
         <options-button
           class="o-primary-btn--option_font-large"
-          onclick="Modal.idDisplayOptions.show()"
-        >ID Display</options-button>
+          onclick="Modal.infoDisplayOptions.show()"
+        >Info Display</options-button>
         <update-rate-slider
           v-model="updateRate"
           oninput="GameOptions.refreshUpdateRate()"

javascripts/core/app/modal.js

@@ -38,7 +38,7 @@ Modal.h2p = new Modal("modal-h2p");
 Modal.shortcuts = new Modal("modal-shortcuts");
 Modal.animationOptions = new Modal("modal-animation-options");
 Modal.confirmationOptions = new Modal("modal-confirmation-options");
-Modal.idDisplayOptions = new Modal("modal-id-display-options");
+Modal.infoDisplayOptions = new Modal("modal-info-display-options");
 Modal.loadGame = new Modal("modal-load-game");
 Modal.uiChoice = new Modal("modal-ui-choice");
 Modal.import = new Modal("modal-import");

javascripts/core/player.js

@@ -474,7 +474,6 @@ let player = {
       perks: false,
       alchemy: false,
     },
-    showAlchemyResources: false,
     chart: {
       updateRate: 1000,
       duration: 10,

javascripts/core/storage/dev-migrations.js

@@ -491,6 +491,10 @@ GameStorage.devMigrations = {
         if (glyph.type === "cursed") glyph.effects = cursedMask;
       }
     },
+    player => {
+      player.options.showHintText.alchemy = player.options.showAlchemyResources;
+      delete player.options.showAlchemyResources;
+    }
   ],
 
   patch(player) {

stylesheets/styles.css

@@ -1634,7 +1634,7 @@ screen and (max-width: 480px) {
 }
 
 .o-hint-text--alchemy-node {
-  color: #aaaaaa;
+  color: #4f5957;
   text-shadow: none;
   font-size: 1.2rem;
   transition: opacity 0.2s;
@@ -5955,17 +5955,6 @@ kbd {
   background-color: #81d4fa;
 }
 
-.o-alchemy-node-resource--always-visible {
-  position: absolute;
-  color: #4f5957;
-  text-shadow: none;
-  font-size: 1.2rem;
-  transition: opacity 0.2s;
-  left: 50%;
-  top: 90%;
-  transform: translate(-50%);
-}
-
 .o-alchemy-node--active {
   background-color: #9ccc65;
 }