</svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><buttontype="button"class="VPNavBarHamburger hamburger"aria-label="mobile navigation"aria-expanded="false"aria-controls="VPNavScreen"data-v-ccf7ddecdata-v-e5dd9c1c><spanclass="container"data-v-e5dd9c1c><spanclass="top"data-v-e5dd9c1c></span><spanclass="middle"data-v-e5dd9c1c></span><spanclass="bottom"data-v-e5dd9c1c></span></span></button></div></div></div></div><divclass="divider"data-v-ccf7ddec><divclass="divider-line"data-v-ccf7ddec></div></div></div><!----></header><divclass="VPLocalNav empty fixed"data-v-5d98c3a5data-v-a6f0e41e><divclass="container"data-v-a6f0e41e><!----><divclass="VPLocalNavOutlineDropdown"style="--vp-vh:0px;"data-v-a6f0e41edata-v-17a5e62e><buttondata-v-17a5e62e>Return to top</button><!----></div></div></div><!----><divclass="VPContent"id="VPContent"data-v-5d98c3a5data-v-1428d186><divclass="VPDoc has-aside"data-v-1428d186data-v-39a288b8><!--[--><!--]--><divclass="container"data-v-39a288b8><divclass="aside"data-v-39a288b8><divclass="aside-curtain"data-v-39a288b8></div><divclass="aside-container"data-v-39a288b8><divclass="aside-content"data-v-39a288b8><divclass="VPDocAside"data-v-39a288b8data-v-3f215769><!--[--><!--]--><!--[--><!--]--><navaria-labelledby="doc-outline-aria-label"class="VPDocAsideOutline"data-v-3f215769data-v-a5bbad30><divclass="content"data-v-a5bbad30><divclass="outline-marker"data-v-a5bbad30></div><divaria-level="2"class="outline-title"id="doc-outline-aria-label"role="heading"data-v-a5bbad30>On this page</div><ulclass="VPDocOutlineItem root"data-v-a5bbad30data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><divclass="spacer"data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><divclass="content"data-v-39a288b8><divclass="content-container"data-v-39a288b8><!--[--><!--]--><mainclass="main"data-v-39a288b8><divstyle="position:relative;"class="vp-doc _public_gamedevtree_docs_clickables"data-v-39a288b8><div><h1id="clickables"tabindex="-1">Clickables <aclass="header-anchor"href="#clickables"aria-label="Permalink to "Clickables""></a></h1><p>Clickables are any kind of thing that you can click for an effect. They're a more generalized version of Buyables.</p><p>DO NOT USE THESE TO MAKE THINGS THAT YOU CLICK REPEATEDLY FOR A BONUS BECAUSE THOSE ARE AWFUL.</p><p>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.</p><p>You can get and set a clickable's state with getClickableState(layer, id) and setClickableState(layer, id, state). You can use clickableEffect(layer, id) to get the current effects of a clickable.</p><p>Clickables should be formatted like this:</p><divclass="language-js vp-adaptive-theme"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">js</span><preclass="shiki shiki-themes github-light github-dark vp-code"tabindex="0"><code><spanclass="line"><spanstyle="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clickables</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<spanclass="line"><spanstyle="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> masterButtonPress</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><spanstyle="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// **optional** If this is present, an additional button will appear above the clickables.</span></span>
<spanclass="line"><spanstyle="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // pressing it will call the function.</span></span>
<spanclass="line"><spanstyle="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> masterButtonText</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><spanstyle="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Press me!"</span><spanstyle="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // **optional** text to display on the Master Button</span></span>
<spanclass="line"><spanstyle="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> showMasterButton</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(){} </span><spanstyle="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//**optional**, a function determining whether or not to show the button. Defaults to true if absent.</span></span>
<spanclass="line"><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span></code></pre></div><p>Features:</p><ul><li><p>title: <strong>optional</strong>, displayed at the top in a larger font It can also be a function that returns updating text.</p></li><li><p>effect(): <strong>optional</strong>, A function that calculates and returns the current values of bonuses of this clickable. Can return a value or an object containing multiple values.</p></li><li><p>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.</p></li><li><p>unlocked(): <strong>optional</strong>, A function returning a bool to determine if the clickable is visible or not. Default is unlocked.</p></li><li><p>canClick(): A function returning a bool to determine if you can click the clickable.</p></li><li><p>onClick(): A function that implements clicking one of the clickable.</p></li><li><p>style: <strong>Optional</strong>, 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)</p></li><li><p>layer: <strong>Assigned automagically</strong>. It's the same value as the name of this layer, so you can do player[this.layer].points or similar.</p></li><li><p>id: <strong>Assigned automagically</strong>. It's the "key" which the clickable was stored under, for convenient access. The clickable in the example's id is 11.</p></li></ul></div></div></main><footerclass="VPDocFooter"data-v-39a288b8data-v-d4a0bba5><!--[--><!--]--><divclass="edit-info"data-v-d4a0bba5><!----><divclass="last-updated"data-v-d4a0bba5><pclass="VPLastUpdated"data-v-d4a0bba5data-v-7e05ebdb>Last updated: <timedatetime="2023-11-28T02:07:21.000Z"data-v-7e05ebdb></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
