Cleanup new code

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

@@ -7,7 +7,8 @@ Vue.component("alchemy-circle-node", {
   },
   data() {
     return {
-      isReactionActive: false
+      isReactionActive: false,
+      amount: 0
     };
   },
   computed: {
@@ -34,6 +35,7 @@ Vue.component("alchemy-circle-node", {
   methods: {
     update() {
       this.isReactionActive = !this.isBaseResource && this.node.resource.reaction.isActive;
+      this.amount = this.resource.amount;
     }
   },
   template: `
@@ -44,7 +46,12 @@ Vue.component("alchemy-circle-node", {
       @mouseleave="$emit('mouseleave')"
       @click="emitClick"
     >{{resource.symbol}}
-    <hint-text class="l-hint-text--achievement">{{resource.amount.toFixed(0)}}</hint-text>
+    <hint-text
+      v-if="isFocused"
+      class="o-hint-text--alchemy-node l-hint-text--alchemy-node"
+    >
+      {{amount.toFixed(0)}}
+    </hint-text>
     </div>
   `
 });

javascripts/components/celestials/subtabs/ra/alchemy-resource-info.js

@@ -30,11 +30,18 @@ Vue.component("alchemy-resource-info", {
         .map(r => r.resource.symbol)
         .join(" + ");
       return `${reagents} ➜ ${this.resource.symbol}`;
+    },
+    effectConfig() {
+      const resource = this.resource;
+      return {
+        effect: () => resource.config.effect(resource.amount),
+        formatEffect: resource.config.formatEffect
+      };
     }
   },
   methods: {
     update() {
-      this.amount = shorten(this.resource.amount, 2, 2);
+      this.amount = this.resource.amount;
       if (!this.isBaseResource) {
         this.isReactionActive = this.reaction.isActive;
         this.reactionProduction = this.reaction.production;
@@ -44,10 +51,10 @@ Vue.component("alchemy-resource-info", {
   template: `
     <div class="c-alchemy-resource-info">
       <span>{{resource.symbol}} {{resource.name}}</span>
-      <span>Current: {{amount}}</span>
+      <span>Current: {{shorten(amount, 2, 2)}}</span>
       <span v-if="isBaseResource">Base Resource</span>
       <span v-else>Reaction: {{isReactionActive ? "Active" : "Inactive"}} ({{reactionText}})</span>
-      <effect-display :key="resource.id" title="Effect" :config="resource.config" />
+      <effect-display title="Effect" :config="effectConfig" />
     </div>
   `
 });

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

@@ -72,7 +72,7 @@ Vue.component("alchemy-tab", {
   },
   template:
     `<div class="l-ra-alchemy-tab">
-      <alchemy-resource-info :resource="infoResource" />
+      <alchemy-resource-info :key="infoResourceId" :resource="infoResource" />
       <div class="l-alchemy-circle" :style="circleStyle">
         <svg class="l-alchemy-orbit-canvas">
           <circle

javascripts/core/celestials/ra/alchemy.js

@@ -13,10 +13,6 @@ class AlchemyResourceState extends GameMechanicState {
     return this.config.isBaseResource === true;
   }
 
-  get formattedEffect() {
-    return this.config.formatEffect(this.effectValue);
-  }
-
   get data() {
     return player.celestials.ra.alchemy[this.id];
   }
@@ -29,6 +25,10 @@ class AlchemyResourceState extends GameMechanicState {
     this.data.amount = value;
   }
 
+  get effectValue() {
+    return this.config.effect(this.amount);
+  }
+
   // Base decay for now, will add player-controllable stuff later
   get decayRate() {
     return AlchemyResource.decoherence.effectValue;
@@ -165,6 +165,7 @@ const AlchemyReactions = (function() {
       }));
   }
   return {
+    // TODO: `all` sould be the one that is `compact()`ed
     all: AlchemyResources.all
       .map(r => (r.isBaseResource ? null : new AlchemyReaction(r, mapReagents(r))))
   };

javascripts/core/reality.js

@@ -427,11 +427,8 @@ function completeReality(force, reset, auto = false) {
   }
 
   if (Ra.has(RA_UNLOCKS.GLYPH_ALCHEMY)) {
-    for (let reactionIndex = 0; reactionIndex < AlchemyReactions.all.length; reactionIndex++) {
-      const reaction = AlchemyReactions.all[reactionIndex];
-      if (reaction !== null) {
-        reaction.combineReagents();
-      }
+    for (const reaction of AlchemyReactions.all.compact()) {
+      reaction.combineReagents();
     }
   }
 }

javascripts/core/secret-formula/celestials/alchemy.js

@@ -32,7 +32,7 @@ GameDatabase.celestials.alchemy = {
       name: "Power",
       symbol: "Ω",
       isBaseResource: true,
-      effect: () => 1 + AlchemyResource.power.amount / 200000,
+      effect: amount => 1 + amount / 200000,
       tier: 1,
       uiOrder: 1,
       formatEffect: value => `Normal dimensions ${formatPow(value, 4, 4)}`
@@ -41,7 +41,7 @@ GameDatabase.celestials.alchemy = {
       name: "Infinity",
       symbol: "∞",
       isBaseResource: true,
-      effect: () => 1 + AlchemyResource.infinity.amount / 200000,
+      effect: amount => 1 + amount / 200000,
       tier: 1,
       uiOrder: 2,
       formatEffect: value => `Infinity dimensions ${formatPow(value, 4, 4)}`
@@ -50,7 +50,7 @@ GameDatabase.celestials.alchemy = {
       name: "Time",
       symbol: "Δ",
       isBaseResource: true,
-      effect: () => 1 + AlchemyResource.time.amount / 200000,
+      effect: amount => 1 + amount / 200000,
       tier: 1,
       uiOrder: 3,
       formatEffect: value => `Time dimensions ${formatPow(value, 4, 4)}`
@@ -59,7 +59,7 @@ GameDatabase.celestials.alchemy = {
       name: "Replication",
       symbol: "Ξ",
       isBaseResource: true,
-      effect: () => Decimal.pow10(AlchemyResource.replication.amount / 1000),
+      effect: amount => Decimal.pow10(amount / 1000),
       tier: 1,
       uiOrder: 4,
       formatEffect: value => `Replication speed ${formatX(value, 2, 2)}`
@@ -68,7 +68,7 @@ GameDatabase.celestials.alchemy = {
       name: "Dilation",
       symbol: "Ψ",
       isBaseResource: true,
-      effect: () => Decimal.pow10(AlchemyResource.dilation.amount / 2000),
+      effect: amount => Decimal.pow10(amount / 2000),
       tier: 1,
       uiOrder: 5,
       formatEffect: value => `Dilated Time ${formatX(value, 2, 2)}`
@@ -79,7 +79,7 @@ GameDatabase.celestials.alchemy = {
       name: "Cardinality",
       symbol: "α",
       isBaseResource: false,
-      effect: () => 1.2 - 0.1 * (AlchemyResource.cardinality.amount / 20000),
+      effect: amount => 1.2 - 0.1 * (amount / 20000),
       tier: 2,
       uiOrder: 3,
       formatEffect: value => `Uncapped replicanti slowdown ${formatX(1.2, 1, 1)} ➜ ` +
@@ -99,7 +99,7 @@ GameDatabase.celestials.alchemy = {
       name: "Eternity",
       symbol: "τ",
       isBaseResource: false,
-      effect: () => 1 + AlchemyResource.eternity.amount / 50000,
+      effect: amount => 1 + amount / 50000,
       tier: 2,
       uiOrder: 2,
       formatEffect: value => `Eternitied stat gain ${formatPow(value, 4, 4)}`,
@@ -118,7 +118,7 @@ GameDatabase.celestials.alchemy = {
       name: "Dimensionality",
       symbol: "ρ",
       isBaseResource: false,
-      effect: () => Decimal.pow10(2 * AlchemyResource.dimensionality.amount),
+      effect: amount => Decimal.pow10(2 * amount),
       tier: 2,
       uiOrder: 1,
       formatEffect: value => `All dimensions ${formatX(value)}`,
@@ -137,7 +137,7 @@ GameDatabase.celestials.alchemy = {
       name: "Inflation",
       symbol: "λ",
       isBaseResource: false,
-      effect: () => Decimal.pow10(1e9 - 3e4 * AlchemyResource.inflation.amount),
+      effect: amount => Decimal.pow10(1e9 - 3e4 * amount),
       tier: 2,
       uiOrder: 5,
       formatEffect: value => `${formatPow(1.05, 2, 2)} for multipliers above ${shorten(value)}`,
@@ -156,7 +156,7 @@ GameDatabase.celestials.alchemy = {
       name: "Alternation",
       symbol: "ω",
       isBaseResource: false,
-      effect: () => AlchemyResource.alternation.amount / 100000,
+      effect: amount => amount / 100000,
       tier: 2,
       uiOrder: 4,
       formatEffect: value => `Dilation penalty reduced by ${formatPercents(value, 2, 2)} ` +
@@ -178,7 +178,7 @@ GameDatabase.celestials.alchemy = {
       name: "Effarig",
       symbol: "Ϙ",
       isBaseResource: true,
-      effect: () => Decimal.pow10(AlchemyResource.effarig.amount / 2500),
+      effect: amount => Decimal.pow10(amount / 2500),
       tier: 2,
       uiOrder: 3.5,
       formatEffect: value => `Relic Shards ${formatX(value, 2, 2)}`
@@ -187,7 +187,7 @@ GameDatabase.celestials.alchemy = {
       name: "Synergism",
       symbol: "π",
       isBaseResource: false,
-      effect: () => Math.min(1, 0.3 + AlchemyResource.synergism.amount / 10000),
+      effect: amount => Math.min(1, 0.3 + amount / 10000),
       tier: 3,
       uiOrder: 2,
       formatEffect: value => `Alchemy reaction efficiency 30% ➜ ${formatPercents(value, 2, 2)}`,
@@ -210,7 +210,7 @@ GameDatabase.celestials.alchemy = {
       name: "Momentum",
       symbol: "μ",
       isBaseResource: false,
-      effect: () => 1 + AlchemyResource.momentum.amount / 1000000,
+      effect: amount => 1 + amount / 1000000,
       tier: 3,
       uiOrder: 3,
       formatEffect: value => `Game speed ${formatX(value, 4, 4)} for every real-time minute ` +
@@ -234,7 +234,7 @@ GameDatabase.celestials.alchemy = {
       name: "Decoherence",
       symbol: "ξ",
       isBaseResource: false,
-      effect: () => AlchemyResource.decoherence.amount / 100000,
+      effect: amount => amount / 100000,
       tier: 3,
       uiOrder: 4,
       formatEffect: value => `Refined glyphs also give ${formatPercents(value, 2)} of their value ` +
@@ -256,7 +256,7 @@ GameDatabase.celestials.alchemy = {
       name: "Exponential",
       symbol: "Γ",
       isBaseResource: false,
-      effect: () => AlchemyResource.exponential.amount / 2500,
+      effect: amount => amount / 2500,
       tier: 4,
       uiOrder: 2,
       formatEffect: value => `IP multiplied by replicanti${formatPow(value, 2, 2)}`,
@@ -275,7 +275,7 @@ GameDatabase.celestials.alchemy = {
       name: "Force",
       symbol: "Φ",
       isBaseResource: false,
-      effect: () => 1 + 2.5 * AlchemyResource.force.amount,
+      effect: amount => 1 + 2.5 * amount,
       tier: 4,
       uiOrder: 2,
       formatEffect: value => `Multiply normal dimensions by RM${formatPow(value, 2, 2)}`,
@@ -294,7 +294,7 @@ GameDatabase.celestials.alchemy = {
       name: "Uncountability",
       symbol: "Θ",
       isBaseResource: false,
-      effect: () => Math.sqrt(AlchemyResource.uncountability.amount),
+      effect: amount => Math.sqrt(amount),
       tier: 4,
       uiOrder: 3,
       formatEffect: value => `Generate ${shorten(value)} realities and perk points per second`,
@@ -317,7 +317,7 @@ GameDatabase.celestials.alchemy = {
       name: "Boundless",
       symbol: "Π",
       isBaseResource: false,
-      effect: () => AlchemyResource.boundless.amount / 10,
+      effect: amount => amount / 10,
       tier: 4,
       uiOrder: 1,
       formatEffect: value => `Glyph level cap increased by ${shortenSmallInteger(value)}`,
@@ -336,7 +336,7 @@ GameDatabase.celestials.alchemy = {
       name: "Multiversal",
       symbol: "Σ",
       isBaseResource: false,
-      effect: () => AlchemyResource.multiversal.amount / 1000,
+      effect: amount => amount / 1000,
       tier: 4,
       uiOrder: 5,
       formatEffect: value => `Each reality simulates ${shortenSmallInteger(value)} additional realities`,
@@ -355,7 +355,7 @@ GameDatabase.celestials.alchemy = {
       name: "Unpredictability",
       symbol: "Λ",
       isBaseResource: false,
-      effect: () => AlchemyResource.unpredictability.amount / 1000,
+      effect: amount => amount / 1000,
       tier: 4,
       uiOrder: 4,
       formatEffect: value => (Ra.has(RA_UNLOCKS.LAITELA_UNLOCK)
@@ -382,7 +382,7 @@ GameDatabase.celestials.alchemy = {
       name: "Reality",
       symbol: "Ϟ",
       isBaseResource: false,
-      effect: () => 1.5 * AlchemyResource.reality.amount,
+      effect: amount => 1.5 * amount,
       tier: 5,
       formatEffect: value => `Can be used to create a level ${shortenSmallInteger(value)} Reality glyph`,
       reagents: [

stylesheets/styles.css

@@ -2064,6 +2064,18 @@ screen and (max-width: 480px) {
   z-index: 1;
 }
 
+.o-hint-text--alchemy-node {
+  color: #4f5957;
+  text-shadow: none;
+  font-size: 1.2rem;
+}
+
+.l-hint-text--alchemy-node {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%);
+}
+
 /*#endregion hint-text*/
 
 /*#region Header*/