diff --git a/changelog.md b/changelog.md index 777acbc..037bf5c 100644 --- a/changelog.md +++ b/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". diff --git a/docs/!general-info.md b/docs/!general-info.md index c86d3e9..caea6bc 100644 --- a/docs/!general-info.md +++ b/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! diff --git a/docs/bars.md b/docs/bars.md index 1818c4b..ca00c62 100644 --- a/docs/bars.md +++ b/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. diff --git a/docs/layer-features.md b/docs/layer-features.md index 54c5068..4077339 100644 --- a/docs/layer-features.md +++ b/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 - - best: A Decimal, tracks highest 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. 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 #) diff --git a/docs/milestones.md b/docs/milestones.md index c5f0d1f..3e8aeca 100644 --- a/docs/milestones.md +++ b/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. diff --git a/docs/trees-and-tree-customization.md b/docs/trees-and-tree-customization.md index 21eba91..0c3d9be 100644 --- a/docs/trees-and-tree-customization.md +++ b/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 diff --git a/js/components.js b/js/components.js index 86d142f..3350434 100644 --- a/js/components.js +++ b/js/components.js @@ -217,8 +217,8 @@ function loadVue() {

You have {{formatWhole(tmp[layer].baseAmount)}} {{tmp[layer].baseResource}}


- Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}}
- You have made a total of {{formatWhole(player[layer].total)}} {{tmp[layer].resource}}
+ Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}}
+ You have made a total of {{formatWhole(player[layer].total)}} {{tmp[layer].resource}}
` }) diff --git a/js/technical/layerSupport.js b/js/technical/layerSupport.js index 517a901..4184576 100644 --- a/js/technical/layerSupport.js +++ b/js/technical/layerSupport.js @@ -124,6 +124,12 @@ function updateLayers(){ layers[layer].infoboxes[thing].unlocked = true } } + + 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) diff --git a/style.css b/style.css index e85e246..a90eddd 100644 --- a/style.css +++ b/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;