Updated gridable docs and added utility functions + fixes

docs/!general-info.md

@@ -39,6 +39,7 @@ While reading this documentation, the following key will be used when describing
 - [Milestones](milestones.md): How to create milestones for a layer.
 - [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.
+- [Achievements](achievements.md): How to create achievements for a layer (or for the whole game).
 
 ### Other components and features
 
@@ -46,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!
-- [Achievements](achievements.md): How to create achievements for a layer (or for the whole game).
+- [Grids][grids.md]: Create a group of similar button tiles defined by a single object. 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/clickables.md

@@ -6,10 +6,10 @@ DO NOT USE THESE TO MAKE THINGS THAT YOU CLICK REPEATEDLY FOR A BONUS BECAUSE TH
 
 There are several differences between the two. One is that a buyable's saved data is its amount as a `Decimal`, while Clickables store a "state" which can be a number or string, but not `Decimal`, array, or object). Buyables have a number of extra features which you can see on their page. Clickables also have a smaller default size.
 
-Useful functions for dealing with achievements and implementing their effects:
+Useful functions for dealing with clickables and implementing their effects:
 
 - getClickableState(layer, id): get the state of the clickable the player has
-- setClickableState(layer, id, state): set the state of the buyable the player has
+- setClickableState(layer, id, state): set the state of the clickable the player has
 - clickableEffect(layer, id): Returns the current effects of the clickable, if any.
 
 Clickables should be formatted like this:
@@ -36,7 +36,7 @@ Features:
 
 - canClick(): A function returning a bool to determine if you can click the clickable.
 
-- onClick(): A function that implements clicking one of the clickable. 
+- onClick(): A function that implements clicking the clickable. 
 
 - onHold(): **optional** A function that is called 20x/sec when the button is held for at least 0.25 seconds.
 

docs/custom-tab-layouts.md

@@ -41,6 +41,13 @@ These are the existing components, but you can create more in [components.js](/j
 
 - prestige-button: The argument is a string that the prestige button should say before the amount of currency you will gain. It can also be a function that returns updating text.
 
+- text-input: A text input box. The argument is the name of the variable in player[layer] that the input is for, player[layer][argument]
+    (Works with strings, numbers, and Decimals!)
+
+- slider: Lets the user input a value with a slider. The argument a 3-element array: [name, min, max].
+    The name is the name of the variable in player[layer] that the input that the input is for, and min and max are the limits of the slider.
+    (Does not work for Decimal values)
+
 - upgrades: The layer's upgrades. The argument is optional, and is a the list of rows this component should include, if it doesn't have all of them.
 
 - milestones, challenges, achievements: Display the upgrades, milestones, and challenges for a layer, as appropriate.
@@ -56,19 +63,14 @@ These are the existing components, but you can create more in [components.js](/j
 - 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 argument is a pair that identifies what bool to toggle, e.g. `[layer, id]`
+- toggle: A toggle button that toggles a bool value. The argument is a pair that identifies the location in player of the bool to toggle, e.g. `[layer, id]`. 'layer' also affects the color of the toggle.
 
-- text-input: A text input box. The argument is the name of the variable in player[layer] that the input is for, player[layer][argument]
-    (Works with strings, numbers, and Decimals!)
-
-- slider: Lets the user input a value with a slider. The argument a 3-element array: [name, min, max].
-    The name is the name of the variable in player[layer] that the input that the input is for, and min and max are the limits of the slider.
-    (Does not work for Decimal values)
+- grid: Displays the gridable grid for the layer. If you need more than one grid, use a layer proxy.
 
 
 The rest of the components are sub-components. They can be used just like other components, but are typically part of another component.
 
-- upgrade, milestone, challenge, buyable, clickable, achievement: An individual upgrade, challenge, etc. The argument is the id. This can be used if you want to have upgrades split up across multiple subtabs, for example.
+- upgrade, milestone, challenge, buyable, clickable, achievement, gridable: An individual upgrade, challenge, etc. The argument is the id. This can be used if you want to have upgrades split up across multiple subtabs, for example.
 
 - respec-button, master-button: The respec and master buttons for buyables and clickables, respectively.
 

docs/grids.md

@@ -0,0 +1,68 @@
+# Grids
+
+TODO: Good description of grids.
+
+**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:**
+  - 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
+  - Individual gridables are not defined individually. All properties go directly into the "grid" object. Functions are called with arguments for the id of the gridables and its associated data, so you can give them the appropriate appearance and properties based on that.
+  - If you need two unrelated grids in a layer, you'll need to use a layer proxy component.
+
+Useful functions for dealing with grids:
+
+- getGridData(layer, id): get the data for the chosen gridable
+- setGridData(layer, id, state): set the data for the chosen gridable
+- gridEffect(layer, id): get the effect for the chosen gridable
+
+The grid should be formatted like this:
+
+```js
+grid: {
+    rows: 4, // If these are dynamic make sure to have a max value as well!
+    cols: 5,
+    getStartData(id) {
+        return 0
+    },
+    getUnlocked(id) { // Default
+        return true
+    },
+    getCanClick(data, id) {
+        return true
+    },
+    onClick(data, id) { 
+        player[this.layer].grid[id]++
+    },
+    getDisplay(data, id) {
+        return data 
+    },
+
+    etc
+}
+```
+
+Features:
+
+- rows, cols: The amount of rows and columns of gridable to display.
+
+- maxRows, maxCols: **sometimes needed**. If rows or cols are dynamic, you need to define the maximum amount that there can be (you can increase it when you update the game though). These CANNOT be dynamic.
+
+- getStartData(id): Creates the default data for the gridable at this position. This can be an object, or a regular value.
+
+- getUnlocked(id): **optional**. Returns true if the gridable at this position should be visible.
+
+- getTitle(data, id): **optional**. Returns text that should displayed at the top in a larger font, based on the position and data of the gridable.
+
+- getDisplay(data, id): **optional**. Returns everything that should be displayed on the gridable after the title, based on the position and data of the gridable.
+
+- getStyle(data, id): **optional**. Returns CSS to apply to this gridable, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings). 
+
+- getCanClick(data, id): **optional**. A function returning a bool to determine if you can click a gridable, based on its data and position. If absent, you can always click it.
+
+- onClick(data, id): A function that implements clicking on the gridable, based on its position and data. 
+
+- onHold(data, id): **optional** A function that is called 20x/sec when the button is held for at least 0.25 seconds.
+                  
+- getEffect(data, id): **optional**. A function that calculates and returns a gridable's effect, based on its position and data. (Whatever that means for a gridable)
+
+- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.

docs/layer-features.md

@@ -76,9 +76,11 @@ You can make almost any value dynamic by using a function in its place, includin
 
 - achievements: Kind of like milestones, but with a different display style and some other differences. Extra features are on the way at a later date! [See here for more info.](achievements.md)
 
+- achievementPopups, milestonePopups: **optional**, If false, disables popup message when you get the achievement/milestone. True by default.
+
 - infoboxes: Displays some text in a box that can be shown or hidden. [See here for more info.](infoboxes.md)
 
-- achievementPopups, milestonePopups: **optional**, If false, disables popup message when you get the achievement/milestone. True by default.
+- grid: Todo: add description.[See here for more info.](grids.md)
 
 ## Prestige formula features
 

js/Demo/demoLayers.js

@@ -540,7 +540,7 @@ addLayer("a", {
             getStyle(data, id) {
                 return {'background-color': '#'+ (data*1234%999999)}
             },
-            onClick(data, id) {
+            onClick(data, id) { // Don't forget onHold
                 player[this.layer].grid[id]++
             },
             getTitle(data, id) {

js/technical/temp.js

@@ -11,7 +11,7 @@ var activeFunctions = [
 	"effectDescription", "display", "fullDisplay", "effectDisplay", "rewardDisplay",
 	"tabFormat", "content",
 	"onComplete", "onPurchase", "onEnter", "onExit",
-	"getUnlocked", "getStyle", "getCanClick",
+	"getUnlocked", "getStyle", "getCanClick", "getTitle", "getDisplay"
 ]
 
 var noCall = doNotCallTheseFunctionsEveryTick

js/utils.js

@@ -61,6 +61,15 @@ function setClickableState(layer, id, state) {
 	player[layer].clickables[id] = state
 }
 
+
+function getGridData(layer, id) {
+	return (player[layer].grid[id])
+}
+
+function setGridData(layer, id, data) {
+	player[layer].grid[id] = data
+}
+
 function upgradeEffect(layer, id) {
 	return (tmp[layer].upgrades[id].effect)
 }
@@ -81,6 +90,11 @@ function achievementEffect(layer, id) {
 	return (tmp[layer].achievements[id].effect)
 }
 
+function gridEffect(layer, id) {
+	return (gridRun(layer, 'getEffect', player[layer].grid[id], id))
+}
+
+
 function canAffordPurchase(layer, thing, cost) {
 
 	if (thing.currencyInternalName) {

style.css

@@ -277,7 +277,7 @@ h1, h2, h3, b, input {
 	overflow: visible;
 }
 
-.tile:hover {
+.tile.can:hover {
 	box-shadow: 0 0 10px var(--points);
 	transform: scale(1.1, 1.1);
 	z-index: 7;