From 9c921cfc584faaabe6c9f1848ca34379e8343bc2 Mon Sep 17 00:00:00 2001 From: Harley White Date: Tue, 11 May 2021 23:34:55 -0400 Subject: [PATCH] Added layer proxy and updated grid docs --- changelog.md | 6 ++++-- docs/!general-info.md | 2 +- docs/custom-tab-layouts.md | 1 + docs/grids.md | 4 ++-- docs/layer-features.md | 4 ++-- js/Demo/demoLayers.js | 2 +- js/components.js | 12 ++++++++++++ style.css | 2 +- 8 files changed, 24 insertions(+), 9 deletions(-) diff --git a/changelog.md b/changelog.md index 852f0d4..552cdc7 100644 --- a/changelog.md +++ b/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 diff --git a/docs/!general-info.md b/docs/!general-info.md index 866c94a..be7e7d9 100644 --- a/docs/!general-info.md +++ b/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! diff --git a/docs/custom-tab-layouts.md b/docs/custom-tab-layouts.md index ededc59..0c769c5 100644 --- a/docs/custom-tab-layouts.md +++ b/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. diff --git a/docs/grids.md b/docs/grids.md index 0986fe9..37b2cf0 100644 --- a/docs/grids.md +++ b/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 diff --git a/docs/layer-features.md b/docs/layer-features.md index de4ca4d..44cdbed 100644 --- a/docs/layer-features.md +++ b/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 diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js index e2bf6ae..164f3c3 100644 --- a/js/Demo/demoLayers.js +++ b/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'}], diff --git a/js/components.js b/js/components.js index bcc071d..bab4327 100644 --- a/js/components.js +++ b/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: ` +
+ +
+ ` + }) Vue.component('infobox', { props: ['layer', 'data'], template: ` diff --git a/style.css b/style.css index 732407a..f978ec2 100644 --- a/style.css +++ b/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;