Made best and total only display conditionally

changelog.md

@@ -1,7 +1,10 @@
 # The Modding Tree changelog:
 
 ### v2.2.1 - 11/7/20
-- Possibly fixed issues with things not updating visually.
+- Improved milestones visually a bit.
+- "best" and "total" are now only displayed if present in startData.
+- Fixed issues with things not updating visually. (Thank you to to Jacorb!)
+- Updated docs on the new tree-related features.
 
 ## v2.2: Uprooted - 11/7/20
 - You can now embed a layer inside of a subtab or microtab!
@@ -17,6 +20,7 @@
 - Thank you to thepaperpilot for fixing errors in docs and improving the infobox appearance!
 - Many other minor fixes.
 
+
 ### v2.1.4 - 10/25/20
 - Added an infobox component. Thank you to thepaperpilot for this contribution!
 - Layer type is now optional, and defaults to "none".

docs/!general-info.md

@@ -29,6 +29,8 @@ While reading this documentation, the following key will be used when describing
 - [Basic layer breakdown](basic-layer-breakdown.md): Breaking down the components of a layer with minimal features.
 - [Layer features](layer-features.md): Explanations of all of the different properties that you can give a layer.
 - [Custom Tab Layouts](custom-tab-layouts.md): An optional way to give your tabs a different layout. You can even create entirely new components to use.
+- [Custom game layouts](trees-and-tree-customization.md): You can get rid of the tree tab, add buttons and other things to the tree,
+    or even customize the tab's layout like a layer tab.
 - [Updating TMT](updating-tmt.md): Using Github Desktop to update your mod's version of TMT.
 
 ### Common components
@@ -38,7 +40,7 @@ While reading this documentation, the following key will be used when describing
 - [Buyables](buyables.md): Create rebuyable upgrades for your layer (with the option to make them respec-able). Can be used to make Enhancers or Space Buildings.
 - [Clickables](clickables.md): A more generalized variant of buyables, for any kind of thing that is sometimes clickable. Between these and Buyables, you can do just about anything.
 
-### Other components
+### Other components and features
 
 - [Challenges](challenges.md): How to create challenges for a layer.
 - [Bars](bars.md): Display some information as a progress bar, gauge, or similar. They are highly customizable, and can be horizontal and vertical as well.
@@ -46,3 +48,4 @@ While reading this documentation, the following key will be used when describing
                         You can even use them to embed a layer inside another layer!
 - [Achievements](achievements.md): How to create achievements for a layer (or for the whole game).
 - [Infoboxes](infoboxes.md): Boxes containing text that can be shown or hidden.
+- [Trees](trees-and-tree-customization.md): Make your own trees. You can make non-layer button nodes too!

docs/bars.md

@@ -23,7 +23,8 @@ Features:
 
 - width, height: The size in pixels of the bar, but as numbers (no "px" at the end).
 
-- progress(): A function that returns the portion of the bar that is filled, from "empty" at 0 to "full" at 1. (Nothing bad happens if the value goes out of these bounds, and it can be a number or `Decimal`)
+- progress(): A function that returns the portion of the bar that is filled, from "empty" at 0 to "full" at 1, updating automatically.
+    (Nothing bad happens if the value goes out of these bounds, and it can be a number or `Decimal`)
 
 - display(): **optional**. A function that returns text to be displayed on top of the bar, can use HTML.
 

docs/layer-features.md

@@ -17,8 +17,8 @@ You can make almost any value dynamic by using a function in its place, includin
             - unlocked: a bool determining if this layer is unlocked or not
             - points: a Decimal, the main currency for the layer
         - Optional:
-            - total: A Decimal, tracks total amount of main prestige currency
+            - total: A Decimal, tracks total amount of main prestige currency. Always tracked, but only shown if you add it here.
-            - best: A Decimal, tracks highest amount of main prestige currency
+            - best: A Decimal, tracks highest amount of main prestige currency. Always tracked, but only shown if you add it here.
             - unlockOrder: used to keep track of relevant layers unlocked before this one.
 
 - color: A color associated with this layer, used in many places. (A string in hex format with a #)

docs/milestones.md

@@ -17,9 +17,9 @@ You can use `hasMilestone(layer, id)` to determine if the player has a given mil
 
 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. Can use basic HTML.
+- requirementDescription: A string describing the requirement for unlocking this milestone. Suggestion: Use a "total". 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. Can use basic HTML.
+- effectDescription: 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. Can use basic HTML.
 
 - done(): A function returning a boolean to determine if the milestone should be awarded.
 

docs/trees-and-tree-customization.md

@@ -7,9 +7,10 @@ This also introduces the "tree" component, which can be used in your layers as w
 ## 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.
+- showTree: True if the tree tab should be shown at the start of the game. (The other tab will fill the whole page)
 - treeLayout: If present, overrides the tree layout and places nodes as you describe instead (explained in the next section).
 
+Additionally, if you want the main layout to not be a tree, you can edit the "tree-tab" layer at the bottom of tree.js to modify it just like a normal layer's tab. You can even switch between left tabs, using showNavTab(layer) to make that layer appear on the left.
 
 ## Trees
 

js/components.js

@@ -217,8 +217,8 @@ function loadVue() {
 		<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>
 			<br><br>
-			<span v-if="player[layer].best != undefined">Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
+			<span v-if="tmp[layer].showBest">Your best {{tmp[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)}} {{tmp[layer].resource}}<br></span>
+			<span v-if="tmp[layer].showTotal">You have made a total of {{formatWhole(player[layer].total)}} {{tmp[layer].resource}}<br></span>
 		</div>
 		`
 	})

js/technical/layerSupport.js

@@ -125,6 +125,12 @@ function updateLayers(){
             }  
         }
         
+        if (layers[layer].startData) {
+            data = layers[layer].startData()
+            if (data.best !== undefined && data.showBest === undefined) layers[layer].showBest = true
+            if (data.total !== undefined && data.showTotal === undefined) layers[layer].showTotal = true
+        }
+
         if(!layers[layer].componentStyles) layers[layer].componentStyles = {}
         if(layers[layer].symbol === undefined) layers[layer].symbol = layer.charAt(0).toUpperCase() + layer.slice(1)
         if(layers[layer].unlockOrder === undefined) layers[layer].unlockOrder = []

style.css

@@ -429,6 +429,9 @@ a {
 
 .milestone {
 	width: 100%;
+	min-width: 120px;
+	padding-left: 5px;
+	padding-right: 5px;
 	height: 75px;
 	background-color: #bf8f8f;
 	border: 4px solid;
@@ -439,6 +442,10 @@ a {
 
 .milestoneDone {
 	width: 100%;
+	min-width: 120px;
+	padding-left: 5px;
+	padding-right: 5px;
+
 	height: 75px;
 	background-color: #77bf5f;
 	border: 4px solid;