Added layer proxy and updated grid docs

changelog.md

@@ -1,7 +1,9 @@
 # The Modding Tree changelog:
 
-- Added grids! Description not ready
-- Added "marked" feature to add a mark to a node. Can be an image instead of a star.
+# v2.5.5 - 5/
+- Added grids! They are a grid of buttons which behave the same, but have their own data. Good for inventory grids, map tiles, and more!
+- Added "marked" feature to add a mark to a node. Can be an image instead of a star. (Originally by Jacorb)
+- Added "layer-proxy" component that lets you use components from another layer.
 - Added the ability to display non-whole numbers in main-display.
 
 # v2.5.4 - 5/10/21

docs/!general-info.md

@@ -47,6 +47,6 @@ While reading this documentation, the following key will be used when describing
 - [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.
 - [Subtabs and Microtabs](subtabs-and-microtabs.md): Create subtabs for your tabs, as well as "microtab" components that you can put inside the tabs.
                         You can even use them to embed a layer inside another layer!
-- [Grids][grids.md]: Create a group of similar button tiles defined by a single object. Good for map tiles, an inventory grid, and more!
+- [Grids][grids.md]: Create a group buttons that behave the same, but have their own data. Good for map tiles, an inventory grid, and more!
 - [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/custom-tab-layouts.md

@@ -67,6 +67,7 @@ These are the existing components, but you can create more in [components.js](/j
 
 - grid: Displays the gridable grid for the layer. If you need more than one grid, use a layer proxy.
 
+- layer-proxy: Lets you use components from another layer. The argument is a pair, `[layer, data]`, consisting of the id of the layer to proxy from, and the tabFormat for the components to show.
 
 The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.
 

docs/grids.md

@@ -1,8 +1,8 @@
 # Grids
 
-TODO: Good description of grids.
+Grids are an easier way of making a group of similar clickables. They all have the same behavior, but are different based on their data.
 
-**NOTE: Gridables are similar to clickables in some respects, but are fundamentally different from all other components in quite a few ways. Be sure to keep these in mind:**
+**NOTE: Gridables are similar to clickables in some respects, but are fundamentally different from normal TMT components in quite a few ways. Be sure to keep these in mind:**
   - Gridable ids use base 100 instead of base 10, so you can have more than 10 tiles in a row. This means that a grid might look like this:
     101  102
     201  202

docs/layer-features.md

@@ -60,7 +60,7 @@ You can make almost any value dynamic by using a function in its place, includin
 
 ## Big features (all optional)
 
-- upgrades: A grid of one-time purchases which can have unique upgrade conditions, currency costs, and bonuses. [See here for more info.](upgrades.md)
+- upgrades: A set of one-time purchases which can have unique upgrade conditions, currency costs, and bonuses. [See here for more info.](upgrades.md)
 
 - milestones: A list of bonuses gained upon reaching certain thresholds of a resource. Often used for automation/QOL. [See here for more info.](milestones.md)
 
@@ -80,7 +80,7 @@ You can make almost any value dynamic by using a function in its place, includin
 
 - infoboxes: Displays some text in a box that can be shown or hidden. [See here for more info.](infoboxes.md)
 
-- grid: Todo: add description.[See here for more info.](grids.md)
+- grid: A grid of buttons that behave the same, but have their own data.[See here for more info.](grids.md)
 
 ## Prestige formula features
 

js/Demo/demoLayers.js

@@ -319,7 +319,7 @@ addLayer("c", {
                     ["buyables", ""], "blank",
                     ["row", [
                         ["toggle", ["c", "beep"]], ["blank", ["30px", "10px"]], // Width, height
-                        ["display-text", function() {return "Beep"}], "blank", ["v-line", "200px"],
+                        ["layer-proxy", ["f", ["prestige-button"]]], "blank", ["v-line", "200px"],
                         ["column", [
                             ["prestige-button", "", {'width': '150px', 'height': '80px'}],
                             ["prestige-button", "", {'width': '100px', 'height': '150px'}],

js/components.js

@@ -75,6 +75,18 @@ function loadVue() {
 		`
 	})
 
+	// data [other layer, tabformat for within proxy]
+	Vue.component('layer-proxy', {
+		props: ['layer', 'data'],
+		computed: {
+			key() {return this.$vnode.key}
+		},
+		template: `
+		<div>
+			<column :layer="data[0]" :data="data[1]" :key="key + 'col'"></column>
+		</div>
+		`
+	})
 	Vue.component('infobox', {
 		props: ['layer', 'data'],
 		template: `

style.css

@@ -270,7 +270,7 @@ h1, h2, h3, b, input {
 .tile {
 	height: 80px;
 	width: 80px;
-	border-radius: 12%;
+	border-radius: 15%;
 	border: 2px solid;
 	border-color: rgba(0, 0, 0, 0.125);
 	font-size: 10px;