Upgrade trees!

js/Demo/demoLayers.js

@@ -109,6 +109,7 @@ addLayer("c", {
                 description: "Gain 1 Point every second.",
                 cost: new Decimal(1),
                 unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
+                branches: [12]
             },
             12: {
                 description: "Point generation is faster based on your unspent Lollipops.",
@@ -353,7 +354,8 @@ addLayer("c", {
                     ["raw-html", function() {return "<h1> C O N F I R M E D </h1>"}], "blank",
                     ["microtabs", "stuff", {'width': '600px', 'height': '350px', 'background-color': 'brown', 'border-style': 'solid'}],
                     ["display-text", "Adjust how many points H gives you!"],
-                    ["slider", ["otherThingy", 1, 30]],
+                    ["slider", ["otherThingy", 1, 30]], "blank", ["upgrade-tree", [[11], 
+                    [12, 22, 22, 11]]]
                 ]
             }
 

js/components.js

@@ -172,7 +172,7 @@ function loadVue() {
 	Vue.component('upgrade', {
 		props: ['layer', 'data'],
 		template: `
-		<button v-if="tmp[layer].upgrades && tmp[layer].upgrades[data]!== undefined && tmp[layer].upgrades[data].unlocked" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: hasUpgrade(layer, data), locked: (!(canAffordUpgrade(layer, data))&&!hasUpgrade(layer, data)), can: (canAffordUpgrade(layer, data)&&!hasUpgrade(layer, data))}"
+		<button v-if="tmp[layer].upgrades && tmp[layer].upgrades[data]!== undefined && tmp[layer].upgrades[data].unlocked" :id='"upgrade-" + layer + "-" + data' v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: hasUpgrade(layer, data), locked: (!(canAffordUpgrade(layer, data))&&!hasUpgrade(layer, data)), can: (canAffordUpgrade(layer, data)&&!hasUpgrade(layer, data))}"
 			v-bind:style="[((!hasUpgrade(layer, data) && canAffordUpgrade(layer, data)) ? {'background-color': tmp[layer].color} : {}), tmp[layer].upgrades[data].style]">
 			<span v-if="layers[layer].upgrades[data].fullDisplay" v-html="run(layers[layer].upgrades[data].fullDisplay, layers[layer].upgrades[data])"></span>
 			<span v-else>
@@ -506,6 +506,22 @@ function loadVue() {
 	`
 	})
 
+	// Data is an array with the structure of the tree
+	Vue.component('upgrade-tree', {
+		props: ['layer', 'data'],
+		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>
+			<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/technical/canvas.js

@@ -45,10 +45,19 @@ function drawTree() {
 					drawTreeBranch(layer, tmp[layer].branches[branch])
 				}
 		}
+		for(id in layers[layer].upgrades) {
+			if (tmp[layer].upgrades[id].branches) {
+				for (branch in tmp[layer].upgrades[id].branches)
+				{
+					drawTreeBranch(id, tmp[layer].upgrades[id].branches[branch], "upgrade-" + layer + "-")
+				}
+
+			}
+		}
 	}
 }
 
-function drawTreeBranch(num1, data) { // taken from Antimatter Dimensions & adjusted slightly
+function drawTreeBranch(num1, data, prefix) { // taken from Antimatter Dimensions & adjusted slightly
 	let num2 = data
 	let color_id = 1
 	if (Array.isArray(data)){
@@ -58,7 +67,10 @@ function drawTreeBranch(num1, data) { // taken from Antimatter Dimensions & adju
 
 	if(typeof(color_id) == "number")
 		color_id = colors_theme[color_id]
-
+	if (prefix) {
+		num1 = prefix + num1
+		num2 = prefix + num2
+	}
 	if (document.getElementById(num1) == null || document.getElementById(num2) == null)
 		return
 

js/utils.js

@@ -85,6 +85,7 @@ function buyUpg(layer, id) {
 	player[layer].upgrades.push(id);
 	if (upg.onPurchase != undefined)
 		run(upg.onPurchase, upg)
+	needCanvasUpdate = true
 }
 
 function buyMaxBuyable(layer, id) {

style.css

@@ -94,9 +94,12 @@ h1, h2, h3, b, input {
 	color: rgba(0, 0, 0, 0.5);
 	text-shadow: var(--hqProperty3);
 	padding: 0;
-	margin: 0 10px 0 10px;
 }
 
+.treeThing {
+	margin: 0 10px 0 10px;
+	vertical-align: middle;
+}
 
 .smallNode {
 	height: 60px;