mirror of
https://github.com/Acamaeda/The-Modding-Tree.git
synced 2024-12-13 01:31:39 +00:00
63 lines
No EOL
3.6 KiB
Markdown
63 lines
No EOL
3.6 KiB
Markdown
# Clickables
|
|
|
|
Clickables are any kind of thing that you can click for an effect. They're a more generalized version of Buyables.
|
|
|
|
DO NOT USE THESE TO MAKE THINGS THAT YOU CLICK REPEATEDLY FOR A BONUS BECAUSE THOSE ARE AWFUL.
|
|
|
|
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 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 clickable the player has
|
|
- clickableEffect(layer, id): Returns the current effects of the clickable, if any.
|
|
|
|
Clickables should be formatted like this:
|
|
|
|
```js
|
|
clickables: {
|
|
11: {
|
|
display() {return "Blah"},
|
|
etc
|
|
}
|
|
etc
|
|
}
|
|
```
|
|
|
|
Features:
|
|
|
|
- title: **optional**. displayed at the top in a larger font. It can also be a function that returns updating text.
|
|
|
|
- effect(): **optional**. A function that calculates and returns the current values of bonuses of this clickable. Can return a value or an object containing multiple values.
|
|
|
|
- display(): A function returning everything that should be displayed on the clickable after the title, likely changing based on its state. Can use basic HTML.
|
|
|
|
- unlocked(): **optional**. A function returning a bool to determine if the clickable is visible or not. Default is unlocked.
|
|
|
|
- canClick(): A function returning a bool to determine if you can click 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.
|
|
|
|
- style: **optional**. Applies CSS to this clickable, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
|
|
|
|
- marked: **optional** Adds a mark to the corner of the clickable. If it's "true" it will be a star, but it can also be an image URL.
|
|
|
|
- tooltip: **optional**. Adds a tooltip to this clickable, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
|
|
|
|
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
|
|
|
|
- id: **assigned automagically**. It's the "key" which the clickable was stored under, for convenient access. The clickable in the example's id is 11.
|
|
|
|
You can also use these features on the clickables object to add a button above all the clickables, for implementing a respec button or similar.
|
|
|
|
- masterButtonPress(): **optional**. If present, an additional button will appear above the clickables. Pressing it will call this function.
|
|
|
|
- masterButtonText: **optional**. Text to display on the Master Button.
|
|
|
|
- showMasterButton(): **optional**. A function determining whether or not to show the button, if masterButtonPress is defined. Defaults to true if absent.
|
|
|
|
|
|
|
|
- branches: **optional**, This is primarially useful for clickable trees. An array of clickable ids. A line will appear from this clickable to all of the clickables in the list. Alternatively, an entry in the array can be a 2-element array consisting of the clickable id and a color value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors). A third element in the array optionally specifies line width. |