ComputedNodeStyle, resourceDisplay always shows base amount

changelog.md

@@ -1,5 +1,9 @@
 # The Modding Tree changelog:
 
+## v2.3.4 - 12/
+- Added an image feature, which puts an image on a node.
+- Resource display now always shows the amount of the currency the layer's gain is based on.
+
 ## v2.3.3 - 12/13/20
 - Fixed the first node in a row always taking up space.
 - layerShown is now optional.

docs/buyables.md

@@ -6,7 +6,7 @@ The amount of a buyable owned is a `Decimal`.
 
 Useful functions for dealing with buyables and implementing their effects:
 
-- getBuyableAmt(layer, id): get the amount of the buyable the player has
+- getBuyableAmount(layer, id): get the amount of the buyable the player has
 - setBuyableAmount(layer, id, amount): set the amount of the buyable the player has
 - buyableEffect(layer, id): Returns the current effects of the buyable, if any.
 

docs/layer-features.md

@@ -124,6 +124,8 @@ You can make almost any value dynamic by using a function in its place, includin
 
 - symbol: **optional**. The text that appears on this layer's node. Default is the layer id with the first letter capitalized.
 
+- image: **override**. The url (local or global) of an image that goes on the node. (Overrides symbol)
+
 - position: **optional**. Determines the horizontal position of the layer in its row in a standard tree. By default, it uses the layer id, and layers are sorted in alphabetical order.
 
 - branches: **optional**. An array of layer/node ids. On a tree, a line will appear from this layer to all of the layers in the list. Alternatively, an entry in the array can be a 2-element array consisting of the layer id and a color value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors).

js/components.js

@@ -227,7 +227,7 @@ function loadVue() {
 		props: ['layer'],
 		template: `
 		<div style="margin-top: -13px">
-			<span v-if="tmp[layer].type=='normal' && tmp[layer].resetGain.lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp[layer].baseAmount)}} {{tmp[layer].baseResource}}</span>
+			<span><br>You have {{formatWhole(tmp[layer].baseAmount)}} {{tmp[layer].baseResource}}</span>
 			<span v-if="tmp[layer].passiveGeneration"><br>You are gaining {{formatWhole(tmp[layer].resetGain.times(tmp[layer].passiveGeneration))}} {{tmp[layer].resource}} per second</span>
 			<br><br>
 			<span v-if="tmp[layer].showBest">Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>

js/technical/systemComponents.js

@@ -42,10 +42,8 @@ var systemComponents = {
 				resetNotify: tmp[layer].prestigeNotify,
 				can: ((player[layer].unlocked || tmp[layer].isLayer) && tmp[layer].isLayer) || (!tmp[layer].isLayer && tmp[layer].canClick),
 			}"
-			v-bind:style="[(tmp[layer].isLayer && layerunlocked(layer)) || (!tmp[layer].isLayer && tmp[layer].canClick) ? {
+			v-bind:style="tmp[layer].computedNodeStyle">
-				'background-color': tmp[layer].color,
+			{{(abb !== '' && tmp[layer].image === undefined) ? abb : ' '}}
-			} : {}, tmp[layer].nodeStyle]">
-			{{(abb !== '' ? abb : ' ')}}
 		</button>
 		`
 	},

js/technical/temp.js

@@ -31,6 +31,7 @@ function setupTemp() {
 		tmp[layer].notify = {}
 		tmp[layer].prestigeNotify = {}
 		tmp[layer].prestigeButtonText = {}
+		tmp[layer].computedNodeStyle = []
 		setupBarStyles(layer)
 	}
 	temp = tmp
@@ -78,6 +79,7 @@ function updateTemp() {
 		tmp[layer].prestigeButtonText = prestigeButtonText(layer)
 		constructBarStyles(layer)
 		constructAchievementStyles(layer)
+		constructNodeStyle(layer)
 		updateChallengeDisplay(layer)
 
 	}
@@ -149,6 +151,19 @@ function updateClickableTemp(layer)
 	updateTempData(layers[layer].clickables, tmp[layer].clickables)
 }
 
+function constructNodeStyle(layer){
+	let style = []
+	if ((tmp[layer].isLayer && layerunlocked(layer)) || (!tmp[layer].isLayer && tmp[layer].canClick))
+		style.push({'background-color': tmp[layer].color})
+	if (tmp[layer].image !== undefined)
+		style.push({'background-image': 'url("' + tmp[layer].image + '")'})
+	style.push(tmp[layer].nodeStyle)
+	Vue.set(tmp[layer], 'computedNodeStyle', style)
+}
+
+
+
+
 function constructAchievementStyles(layer){
 	for (id in tmp[layer].achievements) {
 		ach = tmp[layer].achievements[id]