Added thing-tree

changelog.md

@@ -1,8 +1,9 @@
 # The Modding Tree changelog:
 
+## v2.6.1 - 6/7/21
 - Added global background style to mod.js.
 - Tree branches can have custom line widths.
-- If an upgrade has both canAfford and cost, it checks both.
+- If an upgrade has both canAfford and cost, it checks both. (So you can use canAfford for other things)
 - Releasing a held buyable/clickable with onHold doesn't click it again.
 - Attempt to fix buttons sometimes not updating.
 - Improvements to theme code, partially by Cubedey.

docs/upgrades.md

@@ -65,4 +65,4 @@ If you want to do something more complicated like upgrades that cost two currenc
 
 
 
-- branches: **optional**, This is primarially useful for upgrade trees. An array of upgrade ids. A line will appear from this upgrade to all of the upgrades in the list. Alternatively, an entry in the array can be a 2 or 3-element array consisting of the upgrade 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). The third element optionally specifies line width.
+- branches: **optional**, This is primarially useful for upgrade trees. An array of upgrade ids. A line will appear from this upgrade to all of the upgrades in the list. Alternatively, an entry in the array can be a 2-element array consisting of the upgrade 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). A third element in the array optionally specifies line width.

index.html

@@ -126,5 +126,7 @@
 			<bg :layer="player.tab" ></bg>
 
 		</div>
+		<div class = "bg2" v-bind:style = "tmp.backgroundStyle"></div>
+
 	</div>
 </body>

js/Demo/demoMod.js

@@ -11,7 +11,7 @@ let modInfo = {
 
 // Set your version in num and name
 let VERSION = {
-	num: "2.6.0.1",
+	num: "2.6.1",
 	name: "Fixed Reality",
 }
 

js/components.js

@@ -510,16 +510,26 @@ function loadVue() {
 		computed: {
 			key() {return this.$vnode.key}
 		},
+		template: `<thing-tree :layer="layer" :data = "data" :type = "'upgrade'"></thing-tree>`
+	})
+
+	// Data is an array with the structure of the tree
+	Vue.component('thing-tree', {
+		props: ['layer', 'data', 'type'],
+		computed: {
+			key() {return this.$vnode.key}
+		},
 		template: `<div>
 		<span class="upgRow" v-for="(row, r) in data"><table>
-			<span v-for="id in row" style = "{width: 0px; height: 0px;}" v-if="tmp[layer].upgrades[id]!== undefined && tmp[layer].upgrades[id].unlocked" class="upgAlign">
-				<upgrade :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles.upgrade" class = "treeThing"></upgrade>
+			<span v-for="id in row" style = "{width: 0px; height: 0px;}" v-if="tmp[layer][type+'s'][id]!== undefined && tmp[layer][type+'s'][id].unlocked" class="upgAlign">
+				<div v-bind:is="type" :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles[type]" class = "treeThing"></div>
 			</span>
 			<tr><table><button class="treeNode hidden"></button></table></tr>
 		</span></div>
 	`
 	})
 
+
 	// Updates the value in player[layer][data]
 	Vue.component('text-input', {
 		props: ['layer', 'data'],

js/game.js

@@ -4,7 +4,7 @@ var gameEnded = false;
 
 // Don't change this
 const TMT_VERSION = {
-	tmtNum: "2.6.0.1",
+	tmtNum: "2.6.1",
 	tmtName: "Fixed Reality"
 }