Updated docs with tree things, other fixes

changelog.md

@@ -4,9 +4,12 @@
 - Added support for hiding the tree tab (although some aspects are still lazy and WIP)
 - Added shouldNotify to subtab/microtab buttons. (You can make them highlighted)
 - Added commas to large exponents.
+- Upgrades now only show "currently" if they have an effectDisplay (so not for constant effects).
+- Achievements are part of the default tab format.
 - NaN is now handled more intelligently.
 - The "hide completed challenges" setting now only hides challenges at max completions.
 - Thank you to thepaperpilot for fixing errors in docs and the infobox appearance!
+- Many other minor fixes.
 
 ### v2.1.4 - 10/25/20
 - Added an infobox component. Thank you to thepaperpilot for this contribution!
@@ -174,7 +177,6 @@ which will break old things)
 - Added a few minor features, and updated the docs with new information.
 
 
-
 ### v1.1.1:
 
 - You can define hotkeys directly from layer config.

docs/custom-tab-layouts.md

@@ -51,6 +51,9 @@ These are the existing components, but you can create more in [v.js](/js/v.js):
 
 - infobox: Display an infobox. The argument is the id of the infobox to display.
 
+- tree: Displays a tree. The argument is an array of arrays containing the names of the nodes in the tree (first by row, then by column)
+    [See here for more information on tree layouts and nodes!](trees-and-tree-customization.md)
+
 - toggle: A toggle button that toggles a bool value. The data is a pair that identifies what bool to toggle, e.g. `[layer, id]`
 
 The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.

docs/layer-features.md

@@ -23,7 +23,7 @@ You can make almost any value dynamic by using a function in its place, includin
 
 - color: A color associated with this layer, used in many places. (A string in hex format with a #)
 
-- row: The row of the layer, starting at 0. This affects where the node appears on the tree, and which resets affect the layer.
+- row: The row of the layer, starting at 0. This affects where the node appears on the standard tree, and which resets affect the layer.
 
     Using "side" instead of a number will cause the layer to appear off to the side as a smaller node (useful for achievements and statistics). Side layers are not affected by resets unless you add a doReset to them.
 
@@ -108,9 +108,9 @@ 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.
 
-- position: **optional**. Determines the horizontal position of the layer in its row. By default, it uses the layer id, and layers are sorted in alphabetical order.
+- 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 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).
+- 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).
 
 - nodeStyle: **optional**. A CSS object, where the keys are CSS attributes, which styles this layer's node on the tree.
 

docs/trees-and-tree-customization.md

@@ -4,3 +4,48 @@ If you want to have something beyond the standard tree on the left tab, you can
 of the tree, including making non-layer nodes, change it into something other than a tree, or hide the left tab altogether.
 This also introduces the "tree" component, which can be used in your layers as well.
 
+## layoutInfo
+The most important part is layoutInfo, containing:
+- startTab: The id of the default tab to show on the left at the start.
+- showTree: True if the tree tab should be shown at the start of the game.
+- treeLayout: If present, overrides the tree layout and places nodes as you describe instead (explained in the next section).
+
+
+## Trees
+
+The tree component is defined as an array of arrays of names of layers or nodes to show in the tree. They work just like layers/
+nodes in the main tree (but branches between nodes will only work on the first node if you have duplicates.)
+
+Here is an example tree:
+```js
+[["p"],
+ ["left", "blank", "right", "blank"]
+ ["a", "b", "blank", "c", "weirdButton"]]
+```
+
+## Nodes
+
+Nodes are non-layer buttons that can go in trees. They are defined similarly to layers, but with addNode instead of addLayer.
+
+Features:
+
+- color: **optional**, The node's color. (A string in hex format with a #)
+
+- symbol: **optional** The text on the button (The id capitalized by default)
+
+- canClick(): Returns true if the player can click the node. ()
+
+- onClick(): The function called when the node is clicked.
+
+- layerShown(): **optional**, A function returning a bool which determines if this node should be visible. It can also return "ghost", which will hide the layer, but its node will still take up space in its tree.
+
+- branches: **optional**. An array of layer/node ids. On a tree, a line will appear from this node to all of the nodes in the list. Alternatively, an entry in the array can be a 2-element array consisting of the 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).
+
+- nodeStyle: **optional**. A CSS object, where the keys are CSS attributes, which styles this 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.
+
+- row: **optional**, the row that this node appears in (for the default tree).
+
+- position: **optional**, Determines the horizontal position of the layer in its row in a default tree. By default, it uses the id,
+and layers/nodes are sorted in alphabetical order.

docs/upgrades.md

@@ -33,7 +33,7 @@ Individual upgrades can have these features:
 
 - 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(): **optional**. A function that returns a display of the current effects of the upgrade with formatting. Default behavior is to just display the number appropriately formatted. Can use basic HTML.
+- effectDisplay(): **optional**. A function that returns a display of the current effects of the upgrade with formatting. Default displays nothing. Can use basic HTML.
 
 - cost: A Decimal for the cost of the upgrade. By default, upgrades cost the main prestige currency for the layer.
 

js/Demo/demoLayers.js

@@ -508,8 +508,5 @@ addLayer("a", {
                 onComplete() {console.log("Bork bork bork!")}
             },
         },
-        midsection: [
-            "achievements",
-        ]
     }, 
 )

js/components.js

@@ -152,7 +152,7 @@ function loadVue() {
 			v-bind:style="[((!hasUpgrade(layer, data) && canAffordUpgrade(layer, data)) ? {'background-color': tmp[layer].color} : {}), tmp[layer].upgrades[data].style]">
 			<span v-if= "tmp[layer].upgrades[data].title"><h3 v-html="tmp[layer].upgrades[data].title"></h3><br></span>
 			<span v-html="tmp[layer].upgrades[data].description"></span>
-			<span v-if="tmp[layer].upgrades[data].effect"><br>Currently: <span v-html="(tmp[layer].upgrades[data].effectDisplay) ? (tmp[layer].upgrades[data].effectDisplay) : format(tmp[layer].upgrades[data].effect)"></span></span>
+			<span v-if="tmp[layer].upgrades[data].effectDisplay"><br>Currently: <span v-html="tmp[layer].upgrades[data].effectDisplay"></span></span>
 			<br><br>Cost: {{ formatWhole(tmp[layer].upgrades[data].cost) }} {{(tmp[layer].upgrades[data].currencyDisplayName ? tmp[layer].upgrades[data].currencyDisplayName : tmp[layer].resource)}}
 		</button>
 		`

js/game.js

@@ -214,7 +214,7 @@ function startChallenge(layer, x) {
 	if (!player[layer].unlocked) return
 	if (player[layer].activeChallenge == x) {
 		completeChallenge(layer, x)
-		delete player[layer].activeChallenge
+		player[layer].activeChallenge = null
 	} else {
 		enter = true
 	}	
@@ -253,7 +253,7 @@ function completeChallenge(layer, x) {
 	var x = player[layer].activeChallenge
 	if (!x) return
 	if (! canCompleteChallenge(layer, x)){
-		delete player[layer].activeChallenge
+		 player[layer].activeChallenge = null
 		return
 	}
 	if (player[layer].challenges[x] < tmp[layer].challenges[x].completionLimit) {
@@ -261,7 +261,7 @@ function completeChallenge(layer, x) {
 		player[layer].challenges[x] += 1
 		if (layers[layer].challenges[x].onComplete) layers[layer].challenges[x].onComplete()
 	}
-	delete player[layer].activeChallenge
+	player[layer].activeChallenge = null
 	updateChallengeTemp(layer)
 }
 
@@ -345,7 +345,7 @@ var interval = setInterval(function() {
 			player.offTime.remain -= offlineDiff
 			diff += offlineDiff
 		}
-		if (!player.offlineProd || player.offTime.remain <= 0) delete player.offTime
+		if (!player.offlineProd || player.offTime.remain <= 0) player.offTime = undefined
 	}
 	if (player.devSpeed) diff *= player.devSpeed
 	player.time = now

js/technical/canvas.js

@@ -40,7 +40,7 @@ function drawTree() {
 	if (!retrieveCanvasData()) return;
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
 	for (layer in layers){
-		if (tmp[layer].layerShown && tmp[layer].branches){
+		if (tmp[layer].layerShown == true && tmp[layer].branches){
 			for (branch in tmp[layer].branches)
 				{
 					drawTreeBranch(layer, tmp[layer].branches[branch])

js/technical/systemComponents.js

@@ -88,6 +88,7 @@ var systemComponents = {
 			<buyables v-bind:style="tmp[layer].componentStyles.buyables" :layer="layer"></buyables>
 			<upgrades v-bind:style="tmp[layer].componentStyles['upgrades']" :layer="layer"></upgrades>
 			<challenges v-bind:style="tmp[layer].componentStyles['challenges']" :layer="layer"></challenges>
+			<achievements v-bind:style="tmp[layer].componentStyles.achievements" :layer="layer"></achievements>
 			<br><br>
 		</div>
 		<div v-if="tmp[layer].tabFormat">

js/tree.js

@@ -9,7 +9,7 @@ var layoutInfo = {
 
 
 // A "ghost" layer which offsets other layers in the tree
-addNode("spook", {
+addNode("blank", {
     layerShown: "ghost",
 }, 
 )

js/utils.js

@@ -484,7 +484,7 @@ function upgradeEffect(layer, id){
 }
 
 function challengeEffect(layer, id){
-	return (tmp[layer].challenges[id].effect)
+	return (tmp[layer].challenges[id].rewardEffect)
 }
 
 function buyableEffect(layer, id){
@@ -586,7 +586,7 @@ function clickClickable(layer, id) {
 // Function to determine if the player is in a challenge
 function inChallenge(layer, id){
 	let challenge = player[layer].activeChallenge
-	if (challenge == null) return
+	if (!challenge) return false
 	id = toNumber(id)
 	if (challenge==id) return true
 
@@ -607,6 +607,16 @@ function showTab(name) {
 	needCanvasUpdate = true
 }
 
+function showNavTab(name) {
+	if (LAYERS.includes(name) && !layerunlocked(name)) return
+
+	var toTreeTab = name == "tree"
+	player.navTab = name
+	player.notify[name] = false
+	needCanvasUpdate = true
+}
+
+
 function goBack() {
 	if (player.navTab !== "none") showTab("none")
 	else showTab(player.lastSafeTab)