The rest of 1.3.1

changelog.md

@@ -1,5 +1,15 @@
 #The Modding Tree changelog:
 
+
+##v1.3.1: - 10/7/20
+
+- Added custom CSS and tooltips for Layer Nodes.
+- Added custom CSS for upgrades, buyables, milestones, and challenges, both individually and layer-wide.
+- You can now use HTML in most display text!
+- You can now make milestones unlockable and not display immediately.
+- Fixed importing saves, and issue with upgrades not appearing, and probably more.
+- Optional "name" layer feature, used in confirmation messages.
+
 ##v1.3: Tabception... ception! - 10/7/20
 
 - Added subtabs! And also a Micro-tab component to let you make smaller subtab-esque areas anywhere.

docs/basic-layer-breakdown.md

@@ -2,7 +2,7 @@
 
 This is a very minimal layer with minimal features. Most things will require additional features.
 If you're curious about "() =>", it's a weird notation that lets you use either a value or function in the same slot,
-and treats it like a function. If you're using an actual function there, you can replace it with the normal notation.
+and treats it like a function. You can use it to make actual functions, but it breaks things then.
 
 ```js
     p: {

docs/buyables.md

@@ -33,7 +33,7 @@ Features:
               for having x of this buyable. Can return a value or an object containing multiple values.
 
 - display(): A function returning everything that should be displayed on the rebuyable after the title, likely
-           including the description, amount bought, cost, and current effect.
+           including the description, amount bought, cost, and current effect. Can use basic HTML.
 
 - unl(): A function returning a bool to determine if the buyable is visible or not.
 
@@ -43,6 +43,8 @@ Features:
 
 - buyMax(): **optional**, A function that implements buying as many of the buyable as possible.
 
+- style(): **Optional**, A function returning a CSS object, which affects this buyable.
+
 - layer: **Assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar
 
 - id: **Assigned automagically**. It's the id for this buyable.

docs/challenges.md

@@ -24,16 +24,16 @@ Challenges are stored in the following format:
 Each challenge should have an id where the first digit is the row and the second digit is the column.
 Individual Challenges can have these features:
 
-- name: Name of the challenge, can be a string or a function
+- name: Name of the challenge, can be a string or a function. Can use basic HTML.
 
 - desc: A description of what makes the challenge a challenge. *You will need to implement these elsewhere*
-        It can also be a function that returns updating text.
+        It can also be a function that returns updating text. Can use basic HTML.
 
 - reward: A description of the reward's effect. *You will also have to implement the effect where it is applied.*
-          It can also be a function that returns updating text.
+          It can also be a function that returns updating text. Can use basic HTML.
 
 - effect(): **optional**, A function that calculates and returns the current values of any bonuses from the reward.
-    Can return a value or an object containing multiple values.
+    Can return a value or an object containing multiple values. Can use basic HTML.
 
 - effectDisplay(effects): **optional**, A function that returns a display of the current effects of the reward with 
                      formatting. Default behavior is to just display the a number appropriately formatted.
@@ -54,6 +54,7 @@ By default, challenges use basic Points for the goal. You can change that using
 - currencyLayer: **optional**, the internal name of the layer that currency is stored in.
                  If it's part of a layer, omit.
 
+- style(): **Optional**, A function returning a CSS object, which affects this challenge.
 
 - layer: **Assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar
 

docs/layer-features.md

@@ -51,13 +51,7 @@ Key:
     ],
     ```
 
-- branches: **optional**, determines what lines should appear on the tree when this layer is visible.
+- style(): A function returning a CSS object containing any CSS that should affect this layer's whole tab.
-            An array of pairs consisting of a layer name and a number from 1 to 3.
-            A branch will appear connecting this layer to the correspodnding layer, with the color based on the number.
-            You should add the branch value to the layer that is unlocked second.
-
-- style: A CSS object containing any CSS that should affect this layer's whole tab.
-         Can also be a function returning a dynamic CSS object.
 
 - tabFormat: Use this if you want to add extra things to your tab or change the layout.
 
@@ -81,7 +75,6 @@ Key:
     [Explanations are in a separate file.](subtabs-and-microtabs.md)
 
 
-(subtabs-and-microtabs.md):
 # Prestige formula features
 
 - baseResource: The name of the resource that determines how much of the main currency you gain on reset.
@@ -115,6 +108,19 @@ Key:
                     Can be used to have secondary resource gain on prestige, or to recalculate things or whatnot.
 
 
+# Tree/node features
+
+- branches: **optional**, determines what lines should appear on the tree when this layer is visible.
+            An array of pairs consisting of a layer name and a number from 1 to 3.
+            A branch will appear connecting this layer to the correspodnding layer, with the color based on the number.
+            You should add the branch value to the layer that is unlocked second.
+
+- nodeStyle(): **optional**, a function returning a CSS object, styles this layer's node on the tree
+
+- tooltip() / tooltipLocked(): **optional** Functions that return text, which is the tooltip for the node when the layer
+                               is unlocked or locked, respectively. By default the tooltips behave the same as in the original Prestige Tree.
+
+
 # Other features
 
 - doReset(resettingLayer): **optional**, is triggered when a layer on a row greater than or equal to this one does a reset.
@@ -147,6 +153,16 @@ Key:
 - should_notify: **optional**, a function to return true if this layer should be highlighted in the tree.
                  The layer will automatically be highlighted if you can buy an upgrade whether you have this or not.
 
+- componentStyles: **optional**, An object that contains a set of functions returning CSS objects.
+                   Each of these will be applied to any components on the layer with the type of its id. Example:
+
+```js
+        componentStyles: {
+            "chall"() {return {'height': '200px'}},
+            "prestige-button"() {return {'color': '#AA66AA'}},
+        },
+```
+
 
 # Custom Prestige type only 
 (No effect otherwise)

docs/milestones.md

@@ -16,10 +16,10 @@ You can use hasMilestone(layer, id) to determine if the player has a given miles
 Milestone features:
 
 - requirementDesc: A string describing the requirement for unlocking this milestone. Suggestion: Use a "total".
-                   It can also be a function that returns updating text.
+                   It can also be a function that returns updating text. Can use basic HTML.
 
 - effectDesc: A string describing the reward for having the milestone. *You will have to implement the reward elsewhere.*
-              It can also be a function that returns updating text.
+              It can also be a function that returns updating text. Can use basic HTML.
 
 - done(): A function returning a boolean to determine if the milestone has been fulfilled.
 
@@ -31,6 +31,10 @@ Milestone features:
 
            **Tip:** Toggles are not de-set if the milestone becomes locked! In this case, you should also check if the player has the milestone.
 
+- style(): **Optional**, A function returning a CSS object, which affects this milestone.
+
+- unl(): A function returning a boolean to determine if the milestone should be shown. If absent, it is always shown.
+
 - layer: **Assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar
 
 - id: **Assigned automagically**. It's the id for this milestone.

docs/subtabs-and-microtabs.md

@@ -44,9 +44,9 @@ Normal subtabs and microtab subtabs both use the same features:
 
 - content: The tab layout code for the subtab, in [the tab layout format](custom-tab-layouts.md)
 
-- style: **Optional**, A CSS object or function returning a CSS object, which affects the CSS when in that subtab.
+- style(: **Optional**, A function returning a CSS object, which affects the CSS when in that subtab.
 
-- buttonStyle: **Optional**, A CSS object or function returning that CSS object, which affects the appearance of the button for that subtab.
+- buttonStyle(): **Optional**, A function returning a CSS object, which affects the appearance of the button for that subtab.
 
 - unl(): **Optional**, a function to determine if the button for this subtab should be visible. By default, a subtab is always unlocked. 
     (You can't use the "this" keyword in this function.)

docs/upgrades.md

@@ -26,16 +26,16 @@ Each upgrade should have an id where the first digit is the row and the second d
 Individual upgrades can have these features:
 
 - title: **optional**, displayed at the top in a larger font
-         It can also be a function that returns updating text.
+         It can also be a function that returns updating text. Can use basic HTML.
 
 - desc: A description of the upgrade's effect. *You will also have to implement the effect where it is applied.*
-        It can also be a function that returns updating text.
+        It can also be a function that returns updating text. Can use basic HTML.
 
 - effect(): **optional**, A function that calculates and returns the current values of any bonuses from the upgrade.
     Can return a value or an object containing multiple values.
 
 - effectDisplay(effects): **optional**, A function that returns a display of the current effects of the upgrade with
-                       formatting. Default behavior is to just display the a number appropriately formatted.
+                    formatting. Default behavior is to just display the a number appropriately formatted. Can use basic HTML.
 
 - cost: A Decimal for the cost of the upgrade. By default, upgrades cost the main prestige currency for the layer.
 
@@ -50,6 +50,8 @@ By default, upgrades use the main prestige currency for the layer. You can inclu
 - currencyLayer: **optional**, the internal name of the layer that currency is stored in.
                  If it's not in a layer (like Points), omit.
 
+- style(): **Optional**, A function returning a CSS object, which affects this upgrade.
+
 - layer: **Assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar
 
 - id: **Assigned automagically**. It's the id for this upgrade.

index.html

@@ -49,6 +49,16 @@
 		</div>
 		<div v-if="player.tab=='changelog'" class="col right">
 			<button class="back" onclick="showTab('tree')">←</button><br>
+			<h3>v1.3.1</h3>
+			<ul>
+				<li>Added custom CSS and tooltips for Layer Nodes.</li>
+				<li>Added custom CSS for upgrades, buyables, milestones, and challenges, both individually and layer-wide.</li>
+				<li>You can now use HTML in most display text!</li>
+				<li>You can now make milestones unlockable and not display immediately.</li>
+				<li>Fixed importing saves, and issue with upgrades not appearing, and probably more.</li>
+				<li>Optional "name" layer feature, used in confirmation messages.</li>
+				<li></li>
+			</ul><br>
 			<h3>v1.3: Tabception... ception!</h3>
 			<ul>
 				<li>Added subtabs! And also a Micro-tab component to let you make smaller subtab-esque areas anywhere.</li>
@@ -149,16 +159,16 @@
 			<div v-if="player.tab==layer" v-bind:class="'col right'" v-bind:style="tmp.style[layer] ? tmp.style[layer] : {}">
 				<button class="back" onclick="showTab('tree')">←</button><br><br><br>
 				<div v-if="!layers[layer].tabFormat">
-					<main-display :layer="layer"></main-display>
+					<main-display v-bind:style="tmp.componentStyles[layer]['main-display']" :layer="layer"></main-display>
-					<prestige-button :layer="layer"></prestige-button>
+					<prestige-button v-bind:style="tmp.componentStyles[layer]['prestige-button']" :layer="layer"></prestige-button>
 					<span v-if="layers[layer].type=='normal' && tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp.layerAmt[layer])}} {{layers[layer].baseResource}}</span>
 					<br><br>
 					<span v-if="player[layer].best != undefined">Your best {{layers[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
 					<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{layers[layer].resource}}<br></span>
-					<milestones :layer="layer"></milestones>
+					<milestones v-bind:style="tmp.componentStyles[layer].milestones" :layer="layer"></milestones>
-					<buyables :layer="layer"></buyables>
+					<buyables v-bind:style="tmp.componentStyles[layer].buyables" :layer="layer"></buyables>
-					<upgrades :layer="layer"></upgrades>
+					<upgrades v-bind:style="tmp.componentStyles[layer]['upgrades']" :layer="layer"></upgrades>
-					<challs :layer="layer"></challs>
+					<challs v-bind:style="tmp.componentStyles[layer]['challs']" :layer="layer"></challs>
 					<br><br>
 				</div>
 				<div v-if="layers[layer].tabFormat">
@@ -167,7 +177,7 @@
 					</div>
 					<div v-else v-bind:style="[{'margin-top': '-50px'}, readData(layers[layer].tabFormat[player.subtabs[layer].mainTabs].style)]">
 						<div class="upgTable" v-bind:style="{'padding-top': '25px', 'margin-bottom': '24px'}">
-							<tab-buttons :layer="layer" :data="layers[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
+							<tab-buttons v-bind:style="tmp.componentStyles[layer]['tab-buttons']" :layer="layer" :data="layers[layer].tabFormat" :name="'mainTabs'"></tab-buttons>
 						</div>
 						<column :layer="layer" :data="layers[layer].tabFormat[player.subtabs[layer].mainTabs].content"></column>
 					</div>

js/game.js

@@ -5,7 +5,7 @@ var NaNalert = false;
 var gameEnded = false;
 
 let VERSION = {
-	num: "1.3",
+	num: "1.3.1",
 	name: "Tabception... ception!"
 }
 
@@ -231,21 +231,21 @@ function respecBuyables(layer) {
 }
 
 function canAffordUpg(layer, id) {
-	upg = layers[layer].upgrades[id]
+	let upg = layers[layer].upgrades[id]
-	cost = tmp.upgrades[layer][id].cost
+	let cost = tmp.upgrades[layer][id].cost
 	return canAffordPurchase(layer, upg, cost) 
 }
 
 function hasUpg(layer, id){
-	return (player[layer].upgrades.includes(toNumber(id)))
+	return (player[layer].upgrades.includes(toNumber(id)) || player[layer].upgrades.includes(id.toString()))
 }
 
 function hasMilestone(layer, id){
-	return (player[layer].milestones.includes(toNumber(id)) || player[layer].milestones.includes(id))
+	return (player[layer].milestones.includes(toNumber(id)) || player[layer].milestones.includes(id.toString()))
 }
 
 function hasChall(layer, id){
-	return (player[layer].challs.includes(toNumber(id)))
+	return (player[layer].challs.includes(toNumber(id)) || player[layer].challs.includes(id.toString()))
 }
 
 function upgEffect(layer, id){
@@ -280,8 +280,8 @@ function buyUpg(layer, id) {
 	if (!player[layer].unl) return
 	if (!layers[layer].upgrades[id].unl()) return
 	if (player[layer].upgrades.includes(id)) return
-	upg = layers[layer].upgrades[id]
+	let upg = layers[layer].upgrades[id]
-	cost = tmp.upgrades[layer][id].cost
+	let cost = tmp.upgrades[layer][id].cost
 
 	if (upg.currencyInternalName){
 		let name = upg.currencyInternalName
@@ -329,14 +329,17 @@ function resetRow(row) {
 }
 
 function startChall(layer, x) {
+	let enter = false
 	if (!player[layer].unl) return
 	if (player[layer].active == x) {
 		completeChall(layer, x)
 		delete player[layer].active
 	} else {
-		player[layer].active = x
+		enter = true
-	}
+	}	
 	doReset(layer, true)
+	if(enter) player[layer].active = x
+
 	updateChallTemp(layer)
 }
 

js/layerSupport.js

@@ -64,6 +64,9 @@ function updateLayers(){
             }  
         }
 
+        if(!layers[layer].componentStyles) layers[layer].componentStyles = {}
+
+
         row = layers[layer].row
         if(!ROW_LAYERS[row]) ROW_LAYERS[row] = {}
         ROW_LAYERS[row][layer]=layer;

js/layers.js

@@ -41,16 +41,22 @@ addLayer("c", {
         },
         milestones: {
             0: {requirementDesc:() => "3 Lollipops",
-            done() {return player[this.layer].best.gte(3)}, // Used to determine when to give the milestone
+                done() {return player[this.layer].best.gte(3)}, // Used to determine when to give the milestone
-            effectDesc:() => "Makes this green",
+                effectDesc:() => "Unlock the next milestone",
             },
             1: {requirementDesc:() => "4 Lollipops",
-            done() {return player[this.layer].best.gte(4)},
+                unl() {return hasMilestone(this.layer, 0)},
-            effectDesc:() => "You can toggle beep and boop (which do nothing)",
+                done() {return player[this.layer].best.gte(4)},
-            toggles: [
+                effectDesc:() => "You can toggle beep and boop (which do nothing)",
-                ["c", "beep"], // Each toggle is defined by a layer and the data toggled for that layer
+                toggles: [
-                ["f", "boop"]],
+                    ["c", "beep"], // Each toggle is defined by a layer and the data toggled for that layer
-            }
+                    ["f", "boop"]],
+                style() {                     
+                    if(hasMilestone(this.layer, this.id)) return {
+                        'background-color': '#1111DD' 
+                }},
+        
+                },
         },
         challs: {
             rows: 1,
@@ -94,7 +100,7 @@ addLayer("c", {
                 effectDisplay(fx) { return format(fx)+"x" }, // Add formatting to the effect
             },
             13: {
-                desc:() => "Unlock a secret subtab and make this layer act if you unlocked it first.",
+                desc:() => "Unlock a <b>secret subtab</b> and make this layer act if you unlocked it first.",
                 cost:() => new Decimal(69),
                 currencyDisplayName: "candies", // Use if using a nonstandard currency
                 currencyInternalName: "points", // Use if using a nonstandard currency
@@ -102,7 +108,17 @@ addLayer("c", {
                 unl() { return (hasUpg(this.layer, 12))},
                 onPurchase() { // This function triggers when the upgrade is purchased
                     player[this.layer].order = 0
-                }
+                },
+                style() {
+                    if (hasUpg(this.layer, this.id)) return {
+                    'background-color': '#1111dd' 
+                    }
+                    else if (!canAffordUpg(this.layer, this.id)) {
+                        return {
+                            'background-color': '#dd1111' 
+                        }
+                    } // Otherwise use the default
+                },
             },
         },
         buyables: {
@@ -193,7 +209,7 @@ addLayer("c", {
         // Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
         tabFormat: {
             "main tab": {
-                buttonStyle: {'color': 'orange'},
+                buttonStyle() {return  {'color': 'orange'}},
                 content:
                     ["main-display",
                     ["prestige-button", function() {return "Melt your points into "}],
@@ -205,8 +221,8 @@ addLayer("c", {
                     "h-line", "milestones", "blank", "upgrades", "challs"],
             },
             thingies: {
-                style: {'background-color': '#222222'},
+                style() {return  {'background-color': '#222222'}},
-                buttonStyle: {'border-color': 'orange'},
+                buttonStyle() {return {'border-color': 'orange'}},
                 content:[
                     ["buyables", "150px"], "blank",
                     ["row", [
@@ -230,8 +246,21 @@ addLayer("c", {
 
         },
         style() {return {
-        //    'background-color': '#3325CC'
+            'background-color': '#3325CC' 
         }},
+        nodeStyle() {return { // Style on the layer node
+            'color': '#3325CC',
+            'text-decoration': 'underline' 
+        }},
+        componentStyles: {
+            "chall"() {return {'height': '200px'}},
+            "prestige-button"() {return {'color': '#AA66AA'}},
+        },
+        tooltip() { // Optional, tooltip displays when the layer is unlocked
+            let tooltip = formatWhole(player[this.layer].points) + " " + this.resource
+            if (player[this.layer].buyables[11].gt(0)) tooltip += "\n" + formatWhole(player[this.layer].buyables[11]) + " Exhancers"
+            return tooltip
+        },
         shouldNotify() { // Optional, layer will be highlighted on the tree if true.
                          // Layer will automatically highlight if an upgrade is purchasable.
             return (player.c.buyables[11] == 1)
@@ -265,6 +294,10 @@ addLayer("f", {
         layerShown() {return true}, 
         branches: [["c", 1]], // Each pair corresponds to a line added to the tree when this node is unlocked. The letter is the other end of the line, and the number affects the color, 1 is default
 
+        tooltipLocked() { // Optional, tooltip displays when the layer is locked
+            return ("This weird farmer dinosaur will only see you if you have at least " + this.requires() + " candies. You only have " + formatWhole(player.points))
+        },
+
         // The following are only currently used for "custom" Prestige type:
         prestigeButtonText() { //Is secretly HTML
             if (!this.canBuyMax()) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your candies and lollipops! (At least " + formatWhole(tmp.nextAt[layer]) + " candies)"

js/temp.js

@@ -37,6 +37,39 @@ function updateTemp() {
 		}
 	}
 
+	if (!tmp.microtabs) tmp.microtabs = {}
+	for (layer in layers) {
+		if (!tmp.microtabs[layer]) tmp.microtabs[layer] = {}
+		if (layers[layer].microtabs) {
+			if(layers[layer].microtabs !== undefined){
+				updateMicrotabTemp(layer)
+			}
+		}
+		if(layers[layer].tabFormat && !Array.isArray(layers[layer].tabFormat)){
+			let data2 = layers[layer].tabFormat
+			let set = "mainTabs"
+			if (!tmp.microtabs[layer][set]) tmp.microtabs[layer][set] = {}
+			for (tab in data2) {
+				if (!tmp.microtabs[layer][set][tab])
+					tmp.microtabs[layer][set][tab] = {}
+				if(data2[tab].style)
+					tmp.microtabs[layer][set][tab].style = data2[tab].style()
+				if(data2[tab].buttonStyle)
+					tmp.microtabs[layer][set][tab].buttonStyle = data2[tab].buttonStyle()
+			}
+		}	
+	}
+
+
+	if (!tmp.componentStyles) tmp.componentStyles = {}
+	for (layer in layers) if (layers[layer].componentStyles) {
+		if(layers[layer].componentStyles !== undefined){
+			tmp.componentStyles[layer] = {}
+			for (item in layers[layer].componentStyles)
+				tmp.componentStyles[layer][item] = layers[layer].componentStyles[item]()
+		}
+	}
+
 	if (!tmp.gainMults) tmp.gainMults = {}
 	if (!tmp.gainExp) tmp.gainExp = {}
 	if (!tmp.resetGain) tmp.resetGain = {}
@@ -46,10 +79,13 @@ function updateTemp() {
 	if (!tmp.layerShown) tmp.layerShown = {}
 	if (!tmp.effectDescription) tmp.effectDescription = {}
 	if (!tmp.style) tmp.style = {}
+	if (!tmp.nodeStyle) tmp.nodeStyle = {}
 	if (!tmp.notify) tmp.notify = {}
 	if (!tmp.nextAtDisp) tmp.nextAtDisp = {}
 	if (!tmp.prestigeButtonText) tmp.prestigeButtonText = {}
 	if (!tmp.canReset) tmp.canReset = {}
+	if (!tmp.tooltips) tmp.tooltips = {}
+	if (!tmp.tooltipsLocked) tmp.tooltipsLocked = {}
 
 	for (layer in layers) {
 		if (layers[layer].color) tmp.layerColor[layer] = layers[layer].color()
@@ -65,7 +101,9 @@ function updateTemp() {
 		if (layers[layer].effectDescription) tmp.effectDescription[layer] = layers[layer].effectDescription()
 		if (layers[layer].canReset) tmp.canReset[layer] = layers[layer].canReset()
 		if (layers[layer].prestigeButtonText) tmp.prestigeButtonText[layer] = layers[layer].prestigeButtonText()
-
+		if (layers[layer].tooltip) tmp.tooltips[layer] = layers[layer].tooltip()
+		if (layers[layer].tooltipLocked) tmp.tooltipsLocked[layer] = layers[layer].tooltipLocked()
+		if (layers[layer].nodeStyle) tmp.nodeStyle[layer] = layers[layer].nodeStyle()
 	}
 
 	tmp.pointGen = getPointGen()
@@ -86,6 +124,10 @@ function updateChallTemp(layer) {
 		for (let col = 1; col <= data2.cols; col++) {
 			let id = row * 10 + col
 			tmp.challs[layer][id] = {}
+
+			if (customActive ? data2.active(id) : player[layer].active == id) data[id] = 1
+			else delete data[id]
+
 			tmp.challs[layer][id].unl = data2[id].unl()
 			if(data2[id].name) tmp.challs[layer][id].name = data2[id].name()
 			if(data2[id].desc) tmp.challs[layer][id].desc = data2[id].desc()
@@ -93,10 +135,7 @@ function updateChallTemp(layer) {
 			if(data2[id].effect) tmp.challs[layer][id].effect = data2[id].effect()
 			if(data2[id].effectDisplay) tmp.challs[layer][id].effectDisplay = data2[id].effectDisplay(tmp.challs[layer][id].effect)
 			tmp.challs[layer][id].goal = data2[id].goal()
-
+			if(data2[id].style) tmp.challs[layer][id].style = data2[id].style()
-
-			if (customActive ? data2.active(id) : player[layer].active == id) data[id] = 1
-			else delete data[id]
 		}
 	}
 }
@@ -111,12 +150,14 @@ function updateUpgradeTemp(layer) {
 			let id = row * 10 + col
 			tmp.upgrades[layer][id] = {}
 			tmp.upgrades[layer][id].unl = data2[id].unl()
-			if(data2[id].title) tmp.upgrades[layer][id].title = data2[id].title()
 			if(data2[id].effect) tmp.upgrades[layer][id].effect = data2[id].effect()
+			tmp.upgrades[layer][id].cost = data2[id].cost()
 			if(data2[id].effectDisplay) tmp.upgrades[layer][id].effectDisplay = data2[id].effectDisplay(tmp.upgrades[layer][id].effect)
 			if(data2[id].desc) tmp.upgrades[layer][id].desc = data2[id].desc()
+			if(data2[id].title) tmp.upgrades[layer][id].title = data2[id].title()
+
+			if(data2[id].style) tmp.upgrades[layer][id].style = data2[id].style()
 
-			tmp.upgrades[layer][id].cost = data2[id].cost()
 
 		}
 	}
@@ -129,9 +170,12 @@ function updateMilestoneTemp(layer) {
 	let data2 = layers[layer].milestones
 	for (id in data2) {
 		tmp.milestones[layer][id] = {}
+		if(data2[id].unl) tmp.milestones[layer][id].unl = data2[id].unl()
 		tmp.milestones[layer][id].done = data2[id].done()
 		if(data2[id].requirementDesc) tmp.milestones[layer][id].requirementDesc = data2[id].requirementDesc()
-		if(data2[id].effectDesc) tmp.milestones[layer][id].effectDesc = data2[id].effectDesc()	
+		if(data2[id].effectDesc) tmp.milestones[layer][id].effectDesc = data2[id].effectDesc()
+		if(data2[id].style) tmp.milestones[layer][id].style = data2[id].style()
+	
 	}
 }
 
@@ -151,6 +195,25 @@ function updateBuyableTemp(layer) {
 			tmp.buyables[layer][id].canAfford = data2[id].canAfford()
 			if(data2[id].title) tmp.buyables[layer][id].title = data2[id].title()
 			if(data2[id].display) tmp.buyables[layer][id].display = data2[id].display()
+			if(data2[id].style) tmp.buyables[layer][id].style = data2[id].style()
+
+		}
+	}
+}
+
+function updateMicrotabTemp(layer) {
+	if (layers[layer] === undefined) return
+	let data2 = layers[layer].microtabs
+	for (set in data2) {
+		if (!tmp.microtabs[layer][set]) tmp.microtabs[layer][set] = {}
+		for (tab in data2[set]) {
+			if (!tmp.microtabs[layer][set][tab])
+				tmp.microtabs[layer][set][tab] = {}
+			if(data2[set][tab].style)
+				tmp.microtabs[layer][set][tab].style = data2[set][tab].style()
+			if(data2[set][tab].buttonStyle)
+				tmp.microtabs[layer][set][tab].buttonStyle = data2[set][tab].buttonStyle()
+
 		}
 	}
 }

js/v.js

@@ -1,39 +1,11 @@
 var app;
 
 function loadVue() {
-	Vue.component('layer-node', {
+	// data = a function returning the content (actually HTML)
-		props: ['layer', 'abb'],
-		template: `
-		<button v-if="nodeShown(layer)"
-			v-bind:id="layer"
-			v-on:click="function() {
-				showTab(layer)
-			}"
-			v-bind:tooltip="
-				player[layer].unl ? formatWhole(player[layer].points) + ' ' + layers[layer].resource
-				: 'Reach ' + formatWhole(tmp.layerReqs[layer]) + ' ' + layers[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp.layerAmt[layer]) + ' ' + layers[layer].baseResource + ')'
-			"
-			v-bind:class="{
-				treeNode: true,
-				[layer]: true,
-				hidden: !tmp.layerShown[layer],
-				locked: !player[layer].unl && !tmp.layerAmt[layer].gte(tmp.layerReqs[layer]),
-				notify: tmp.notify[layer],
-				can: layerUnl(layer),
-			}"
-			v-bind:style="{
-				'background-color': tmp.layerColor[layer],
-			}">
-			{{abb}}
-		</button>
-		`
-	})
-
-	// data = a function returning the content
 	Vue.component('display-text', {
 		props: ['layer', 'data'],
 		template: `
-			<span>{{readData(data)}}</span>
+			<span v-html="readData(data)"></span>
 		`
 	})
 
@@ -61,7 +33,7 @@ function loadVue() {
 	Vue.component('display-image', {
 		props: ['layer', 'data'],
 		template: `
-			<span><img v-bind:src= "readData(data)" v-bind:alt= "readData(data)"></span>
+			<img v-bind:src= "readData(data)" v-bind:alt= "readData(data)">
 		`
 	})
 		
@@ -72,9 +44,9 @@ function loadVue() {
 		<div class="upgTable">
 			<div class="upgRow">
 				<div v-for="item in data">
-				<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div>
+				<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp.componentStyles[layer][item]"></div>
-				<div v-else-if="item.length==3" v-bind:style="(item[2] ? item[2] : {})" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
+				<div v-else-if="item.length==3" v-bind:style="[tmp.componentStyles[layer][item], (item[2] ? item[2] : {})]" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
-				<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
+				<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]" v-bind:style="tmp.componentStyles[layer][item]"></div>
 				</div>
 			</div>
 		</div>
@@ -88,9 +60,9 @@ function loadVue() {
 		<div class="upgTable">
 			<div class="upgCol">
 				<div v-for="item in data">
-				<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer"></div>
+				<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp.componentStyles[layer][item]"></div>
-				<div v-else-if="item.length==3" v-bind:style="(item[2] ? item[2] : {})" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
+				<div v-else-if="item.length==3" v-bind:style="[tmp.componentStyles[layer][item], (item[2] ? item[2] : {})]" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
-				<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]"></div>
+				<div v-else-if="item.length==2" v-bind:is="item[0]" :layer= "layer" :data= "item[1]" v-bind:style="tmp.componentStyles[layer][item]"></div>
 				</div>
 			</div>
 		</div>
@@ -120,7 +92,7 @@ function loadVue() {
 		<div v-if="layers[layer].challs" class="upgTable">
 			<div v-for="row in layers[layer].challs.rows" class="upgRow">
 				<div v-for="col in layers[layer].challs.cols">
-					<chall :layer = "layer" :data = "row*10+col"></chall>
+					<chall :layer = "layer" :data = "row*10+col" v-bind:style="tmp.componentStyles[layer].chall"></chall>
 				</div>
 			</div>
 		</div>
@@ -131,15 +103,13 @@ function loadVue() {
 	Vue.component('chall', {
 		props: ['layer', 'data'],
 		template: `
-		<div v-if="layers[layer].challs">
+		<div v-if="layers[layer].challs && tmp.challs[layer][data].unl && !(player.hideChalls && hasChall(layer, [data]))" v-bind:class="{hChall: true, done: player[layer].challs.includes(data), canComplete: tmp.challActive[layer][data]&&!player[layer].challs.includes(data)&&canCompleteChall(layer, data)}">
-			<div v-if="tmp.challs[layer][data].unl && !(player.hideChalls && hasChall(layer, [data]))" v-bind:class="{hChall: true, done: player[layer].challs.includes(data), canComplete: tmp.challActive[layer][data]&&!player[layer].challs.includes(data)&&canCompleteChall(layer, data)}">
+			<br><h3 v-html="tmp.challs[layer][data].name"></h3><br><br>
-				<br><h3>{{tmp.challs[layer][data].name}}</h3><br><br>
+			<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="startChall(layer, data)">{{player[layer].active==(data)?(canCompleteChall(layer, data)?"Finish":"Exit Early"):(player[layer].challs.includes(data)?"Completed":"Start")}}</button><br><br>
-				<button v-bind:class="{ longUpg: true, can: true, [layer]: true }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="startChall(layer, data)">{{player[layer].active==(data)?(canCompleteChall(layer, data)?"Finish":"Exit Early"):(player[layer].challs.includes(data)?"Completed":"Start")}}</button><br><br>
+			<span v-html="tmp.challs[layer][data].desc"></span><br>
-				{{tmp.challs[layer][data].desc}}<br>
+			Goal: {{format(tmp.challs[layer][data].goal)}} {{layers[layer].challs[data].currencyDisplayName ? layers[layer].challs[data].currencyDisplayName : "points"}}<br>
-				Goal: {{format(tmp.challs[layer][data].goal)}} {{layers[layer].challs[data].currencyDisplayName ? layers[layer].challs[data].currencyDisplayName : "points"}}<br>
+			Reward: <span v-html="tmp.challs[layer][data].reward"></span><br>
-				Reward: {{tmp.challs[layer][data].reward}}<br>
+			<span v-if="tmp.challs[layer][data].effect!==undefined">Currently: <span v-html="(tmp.challs[layer][data].effectDisplay) ? (tmp.challs[layer][data].effectDisplay) : format(tmp.challs[layer][data].effect)"></span></span>
-				<span v-if="tmp.challs[layer][data].effect!==undefined">Currently: {{(tmp.challs[layer][data].effectDisplay) ? (tmp.challs[layer][data].effectDisplay) : format(tmp.challs[layer][data].effect)}}</span>
-			</div>
 		</div>
 		`
 	})
@@ -150,7 +120,7 @@ function loadVue() {
 		<div v-if="layers[layer].upgrades" class="upgTable">
 			<div v-for="row in layers[layer].upgrades.rows" class="upgRow">
 				<div v-for="col in layers[layer].upgrades.cols" class="upgAlign">
-					<upgrade :layer = "layer" :data = "row*10+col"></upgrade>
+					<upgrade :layer = "layer" :data = "row*10+col" v-bind:style="tmp.componentStyles[layer].upgrade"></upgrade>
 				</div>
 			</div>
 			<br>
@@ -162,14 +132,13 @@ function loadVue() {
 	Vue.component('upgrade', {
 		props: ['layer', 'data'],
 		template: `
-		<div v-if="layers[layer].challs">
+		<button v-if="layers[layer].upgrades && tmp.upgrades[layer][data].unl" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(data), locked: (!(canAffordUpg(layer, data))&&!player[layer].upgrades.includes(data)), can: (canAffordUpg(layer, data)&&!player[layer].upgrades.includes(data))}"
-			<button v-if="tmp.upgrades[layer][data].unl" v-on:click="buyUpg(layer, data)" v-bind:class="{ [layer]: true, upg: true, bought: player[layer].upgrades.includes(data), locked: (!(canAffordUpg(layer, data))&&!player[layer].upgrades.includes(data)), can: (canAffordUpg(layer, data)&&!player[layer].upgrades.includes(data))}" v-bind:style="{'background-color': tmp.layerColor[layer]}">
+			v-bind:style="[((!hasUpg(layer, data) && canAffordUpg(layer, data)) ? {'background-color': tmp.layerColor[layer]} : {}), tmp.upgrades[layer][data].style]">
-				<span v-if= "tmp.upgrades[layer][data].title"><h3>{{tmp.upgrades[layer][data].title}}</h3><br></span>
+			<span v-if= "tmp.upgrades[layer][data].title"><h3 v-html="tmp.upgrades[layer][data].title"></h3><br></span>
-				{{ tmp.upgrades[layer][data].desc }}
+			<span v-html="tmp.upgrades[layer][data].desc"></span>
-				<span v-if="tmp.upgrades[layer][data].effect"><br>Currently: {{(tmp.upgrades[layer][data].effectDisplay) ? (tmp.upgrades[layer][data].effectDisplay) : format(tmp.upgrades[layer][data].effect)}}</span>
+			<span v-if="tmp.upgrades[layer][data].effect"><br>Currently: <span v-html="(tmp.upgrades[layer][data].effectDisplay) ? (tmp.upgrades[layer][data].effectDisplay) : format(tmp.upgrades[layer][data].effect)"></span></span>
-				<br><br>Cost: {{ formatWhole(tmp.upgrades[layer][data].cost) }} {{(layers[layer].upgrades[data].currencyDisplayName ? layers[layer].upgrades[data].currencyDisplayName : layers[layer].resource)}}
+			<br><br>Cost: {{ formatWhole(tmp.upgrades[layer][data].cost) }} {{(layers[layer].upgrades[data].currencyDisplayName ? layers[layer].upgrades[data].currencyDisplayName : layers[layer].resource)}}
-			</button>
+		</button>
-		</div>
 		`
 	})
 
@@ -179,7 +148,7 @@ function loadVue() {
 		<div v-if="layers[layer].milestones">
 			<table>
 				<tr v-for="id in Object.keys(layers[layer].milestones)">
-					<milestone :layer = "layer" :data = "id"></milestone>
+					<milestone :layer = "layer" :data = "id" v-bind:style="tmp.componentStyles[layer].milestone"></milestone>
 				</tr>
 			</table>
 			<br>
@@ -191,8 +160,10 @@ function loadVue() {
 	Vue.component('milestone', {
 		props: ['layer', 'data'],
 		template: `
-		<td v-if="layers[layer].milestones && milestoneShown(layer, data)" v-bind:class="{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}"><h3>{{tmp.milestones[layer][data].requirementDesc}}</h3><br>{{tmp.milestones[layer][data].effectDesc}}<br>
+		<td v-if="layers[layer].milestones && milestoneShown(layer, data)" v-bind:style="[(layers[layer].milestones[data].unl && !tmp.milestones[layer][data].unl) ? {'visibility': 'hidden'} : {}, tmp.milestones[layer][data].style]" v-bind:class="{milestone: !player[layer].milestones.includes(data), milestoneDone: player[layer].milestones.includes(data)}">
-		<span v-if="(layers[layer].milestones[data].toggles)&&(player[layer].milestones.includes(data))" v-for="toggle in layers[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle"></toggle>&nbsp;</span></td></tr>
+			<h3 v-html="tmp.milestones[layer][data].requirementDesc"></h3><br>
+			<span v-html="tmp.milestones[layer][data].effectDesc"></span><br>
+		<span v-if="(layers[layer].milestones[data].toggles)&&(player[layer].milestones.includes(data))" v-for="toggle in layers[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle" v-bind:style="tmp.componentStyles[layer].toggle"></toggle>&nbsp;</span></td></tr>
 		`
 	})
 
@@ -208,10 +179,13 @@ function loadVue() {
 		props: ['layer', 'data'],
 		template: `
 		<span>
-			<button v-if="layers[layer].type=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<span v-if="tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br><br>Next at {{ (layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ layers[layer].baseResource }}</span></button>
+			<button v-if="layers[layer].type=='normal'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.layerReqs[layer]), can: tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) }"
-			<button v-if="layers[layer].type=='static'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }" v-bind:style="{'background-color': tmp.layerColor[layer]}" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">{{(tmp.layerAmt[layer].gte(tmp.nextAt[layer])&&layers[layer].canBuyMax && layers[layer].canBuyMax())?"Next":"Req"}}: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAtDisp[layer]) : format(tmp.nextAtDisp[layer]))}} {{ layers[layer].baseResource }}</button>		
+				v-bind:style="[tmp.layerAmt[layer].gte(tmp.layerReqs[layer]) ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(1e3)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<span v-if="tmp.resetGain[layer].lt(100) && player[layer].points.lt(1e3)"><br><br>Next at {{ (layers[layer].resCeil ? formatWhole(tmp.nextAt[layer]) : format(tmp.nextAt[layer])) }} {{ layers[layer].baseResource }}</span></button>
-			<button v-if="layers[layer].type=='custom'" v-bind:class="{ [layer]: true, reset: true, locked: !tmp.canReset[layer], can: tmp.canReset[layer] }" v-bind:style="{'background-color': tmp.layerColor[layer], 'white-space': 'pre-line' }" v-on:click="doReset(layer)" v-html="tmp.prestigeButtonText[layer]"></button>		
+			<button v-if="layers[layer].type=='static'" v-bind:class="{ [layer]: true, reset: true, locked: tmp.layerAmt[layer].lt(tmp.nextAt[layer]), can: tmp.layerAmt[layer].gte(tmp.nextAt[layer]) }"
-			</span>
+				v-bind:style="[tmp.layerAmt[layer].gte(tmp.nextAt[layer]) ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v-on:click="doReset(layer)"><span v-if="player[layer].points.lt(10)">{{data ? data() : "Reset for "}}</span>+<b>{{formatWhole(tmp.resetGain[layer])}}</b> {{layers[layer].resource}}<br><br><span v-if="player[layer].points.lt(10)">{{(tmp.layerAmt[layer].gte(tmp.nextAt[layer])&&layers[layer].canBuyMax && layers[layer].canBuyMax())?"Next":"Req"}}: {{formatWhole(tmp.layerAmt[layer])}} / </span>{{(layers[layer].resCeil ? formatWhole(tmp.nextAtDisp[layer]) : format(tmp.nextAtDisp[layer]))}} {{ layers[layer].baseResource }}</button>		
+			<button v-if="layers[layer].type=='custom'" v-bind:class="{ [layer]: true, reset: true, locked: !tmp.canReset[layer], can: tmp.canReset[layer] }"
+				v-bind:style="[tmp.canReset[layer] ? {'background-color': tmp.layerColor[layer]} : {}, tmp.componentStyles[layer]['prestige-button']]" v-on:click="doReset(layer)" v-html="tmp.prestigeButtonText[layer]"></button>		
+		</span>
 		`
 	
 	})
@@ -232,7 +206,7 @@ function loadVue() {
 			<button v-if="layers[layer].buyables.respec" v-on:click="respecBuyables(layer)" v-bind:class="{ longUpg: true, can: player[layer].unl, locked: !player[layer].unl }">{{layers[layer].buyables.respecText ? tmp.buyables[layer].respecText : "Respec"}}</button><br>
 			<div v-for="row in layers[layer].buyables.rows" class="upgRow">
 				<div v-for="col in layers[layer].buyables.cols" class="upgAlign" v-bind:style="{'margin-left': '7px', 'margin-right': '7px',  'height': (data ? data : '200px'),}">
-					<buyable :layer = "layer" :data = "row*10+col" :size = "data"></buyable>
+					<buyable :layer = "layer" :data = "row*10+col" :size = "data" v-bind:style="tmp.componentStyles[layer].buyable"></buyable>
 				</div>
 				<br>
 			</div>
@@ -244,16 +218,14 @@ function loadVue() {
 	Vue.component('buyable', {
 		props: ['layer', 'data', 'size'],
 		template: `
-		<div v-if="layers[layer].buyables">
+		<button 
-			<button 
+			v-if="layers[layer].buyables && tmp.buyables[layer][data].unl" 
-				v-if="tmp.buyables[layer][data].unl" 
+			v-bind:class="{ buyable: true, can: tmp.buyables[layer][data].canAfford, locked: !tmp.buyables[layer][data].canAfford}"
-				v-bind:class="{ buyable: true, can: tmp.buyables[layer][data].canAfford, locked: !tmp.buyables[layer][data].canAfford}"
+			v-bind:style="[tmp.buyables[layer][data].canAfford ? {'background-color': tmp.layerColor[layer]} : {}, {'height': (size ? size : 'inherit'), 'width': (size ? size : '200px')}, tmp.buyables[layer][data].style]"
-				v-bind:style="{'background-color': tmp.layerColor[layer], 'height': (size ? size : 'inherit'), 'width': (size ? size : '200px')}"
+			v-on:click="buyBuyable(layer, data)">
-				v-on:click="buyBuyable(layer, data)">
+			<span v-if= "layers[layer].buyables[data].title"><h2 v-html="tmp.buyables[layer][data].title"></h2><br></span>
-				<span v-if= "layers[layer].buyables[data].title"><h2>{{tmp.buyables[layer][data].title}}</h2><br></span>
+			<span v-bind:style="{'white-space': 'pre-line'}" v-html="tmp.buyables[layer][data].display"></span>
-				<span v-bind:style="{'white-space': 'pre-line'}">{{tmp.buyables[layer][data].display}}</span>
+		</button>
-			</button>
-		</div>
 		`
 	})
 
@@ -266,9 +238,9 @@ function loadVue() {
 		template: `
 		<div v-if="layers[layer].microtabs" :style="{'border-style': 'solid'}">
 			<div class="upgTable">
-				<tab-buttons :layer="layer" :data="layers[layer].microtabs[data]" :name="data"></tab-buttons>
+				<tab-buttons :layer="layer" :data="layers[layer].microtabs[data]" :name="data" v-bind:style="tmp.componentStyles[layer]['tab-buttons']"></tab-buttons>
 			</div>
-			<column v-bind:style="readData(layers[layer].microtabs[data][player.subtabs[layer][data]].style)" :layer="layer" :data="layers[layer].microtabs[data][player.subtabs[layer][data]].content"></column>
+			<column v-bind:style="tmp.microtabs[layer][data][player.subtabs[layer][data]].style" :layer="layer" :data="layers[layer].microtabs[data][player.subtabs[layer][data]].content"></column>
 		</div>
 		`
 	})
@@ -280,13 +252,39 @@ function loadVue() {
 		template: `
 			<div class="upgRow">
 				<div v-for="tab in Object.keys(data)">
-					<button v-if="!data[tab].unl || data[tab].unl()" class="tabButton" v-bind:style="[{'border-color': tmp.layerColor[layer]}, readData(data[tab].buttonStyle)]" v-on:click="player.subtabs[layer][name] = tab">{{tab}}</button>
+					<button v-if="!data[tab].unl || data[tab].unl()" class="tabButton" v-bind:style="[{'border-color': tmp.layerColor[layer]}, tmp.componentStyles[layer]['tab-button'], tmp.microtabs[layer][name][tab].buttonStyle]" v-on:click="player.subtabs[layer][name] = tab">{{tab}}</button>
 				</div>
 			</div>
 		`
 	})
 
-
+	Vue.component('layer-node', {
+		props: ['layer', 'abb'],
+		template: `
+		<button v-if="nodeShown(layer)"
+			v-bind:id="layer"
+			v-on:click="function() {
+				showTab(layer)
+			}"
+			v-bind:tooltip="
+				player[layer].unl ? (layers[layer].tooltip ? tmp.tooltips[layer] : formatWhole(player[layer].points) + ' ' + layers[layer].resource)
+				: (layers[layer].tooltipLocked ? tmp.tooltipsLocked[layer] : 'Reach ' + formatWhole(tmp.layerReqs[layer]) + ' ' + layers[layer].baseResource + ' to unlock (You have ' + formatWhole(tmp.layerAmt[layer]) + ' ' + layers[layer].baseResource + ')')
+			"
+			v-bind:class="{
+				treeNode: true,
+				[layer]: true,
+				hidden: !tmp.layerShown[layer],
+				locked: !player[layer].unl && !tmp.layerAmt[layer].gte(tmp.layerReqs[layer]),
+				notify: tmp.notify[layer],
+				can: layerUnl(layer),
+			}"
+			v-bind:style="[layerUnl(layer) ? {
+				'background-color': tmp.layerColor[layer],
+			} : {}, tmp.nodeStyle[layer]]">
+			{{abb}}
+		</button>
+		`
+	})
 
 
 	app = new Vue({

style.css

@@ -77,7 +77,7 @@ h1, h2, h3, b, input {
 }
 
 .locked {
-	background-color: #bf8f8f !important;
+	background-color: #bf8f8f;
 	cursor: not-allowed;
 }
 
@@ -93,7 +93,7 @@ h1, h2, h3, b, input {
 .treeNode.notify {
 	transform: scale(1.1, 1.1);
 	border-color: rgba(255, 0, 0, 0.125) rgba(255, 0, 0, 0.25) rgba(255, 0, 0, 0.25) rgba(255, 0, 0, 0.125);
-	box-shadow: var(--hqProperty2a), 0px 0px 20px #ff0000 !important;
+	box-shadow: var(--hqProperty2a), 0px 0px 20px #ff0000;
 	z-index: 3
 }
 
@@ -104,7 +104,7 @@ h1, h2, h3, b, input {
 }
 
 .bought {
-	background-color: #77bf5f !important;
+	background-color: #77bf5f;
 	cursor: default;
 }
 
@@ -425,7 +425,7 @@ ul {
 
 [tooltip] {
 	position: relative;
-	z-index: 2
+	z-index: 999999 !important
 }
 
 [tooltip]:before,