From fb7a3fdfec41b55d1ddd33ea4c4d48d6a85fc08b Mon Sep 17 00:00:00 2001
From: Acamaeda <acamaeda@gmail.com>
Date: Wed, 16 Dec 2020 21:20:00 -0500
Subject: [PATCH] ComputedNodeStyle, resourceDisplay always shows base amount

---
 changelog.md                     |  4 ++++
 docs/buyables.md                 |  2 +-
 docs/layer-features.md           |  2 ++
 js/components.js                 |  2 +-
 js/technical/systemComponents.js |  6 ++----
 js/technical/temp.js             | 15 +++++++++++++++
 6 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/changelog.md b/changelog.md
index cbb3369..1f93aa3 100644
--- a/changelog.md
+++ b/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.
diff --git a/docs/buyables.md b/docs/buyables.md
index 7a59d54..a648d64 100644
--- a/docs/buyables.md
+++ b/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.
 
diff --git a/docs/layer-features.md b/docs/layer-features.md
index 07b71e0..7b13acd 100644
--- a/docs/layer-features.md
+++ b/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).
diff --git a/js/components.js b/js/components.js
index 2324b57..1b55182 100644
--- a/js/components.js
+++ b/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>
diff --git a/js/technical/systemComponents.js b/js/technical/systemComponents.js
index be8f01b..e568b0c 100644
--- a/js/technical/systemComponents.js
+++ b/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) ? {
-				'background-color': tmp[layer].color,
-			} : {}, tmp[layer].nodeStyle]">
-			{{(abb !== '' ? abb : '&nbsp;')}}
+			v-bind:style="tmp[layer].computedNodeStyle">
+			{{(abb !== '' && tmp[layer].image === undefined) ? abb : '&nbsp;'}}
 		</button>
 		`
 	},
diff --git a/js/technical/temp.js b/js/technical/temp.js
index da31d2d..535563e 100644
--- a/js/technical/temp.js
+++ b/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]