</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-a0fd61f4data-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><!----></header><divclass="VPLocalNav fixed reached-top"data-v-5a346dfedata-v-79c8c1df><!----><divclass="VPLocalNavOutlineDropdown"style="--vp-vh:0px;"data-v-79c8c1dfdata-v-1c15a60a><buttondata-v-1c15a60a>Return to top</button><!----></div></div><!----><divclass="VPContent"id="VPContent"data-v-5a346dfedata-v-669faec9><divclass="VPDoc has-aside"data-v-669faec9data-v-6b87e69f><!--[--><!--]--><divclass="container"data-v-6b87e69f><divclass="aside"data-v-6b87e69f><divclass="aside-curtain"data-v-6b87e69f></div><divclass="aside-container"data-v-6b87e69f><divclass="aside-content"data-v-6b87e69f><divclass="VPDocAside"data-v-6b87e69fdata-v-3f215769><!--[--><!--]--><!--[--><!--]--><divclass="VPDocAsideOutline"role="navigation"data-v-3f215769data-v-d330b1bb><divclass="content"data-v-d330b1bb><divclass="outline-marker"data-v-d330b1bb></div><divclass="outline-title"role="heading"aria-level="2"data-v-d330b1bb>On this page</div><navaria-labelledby="doc-outline-aria-label"data-v-d330b1bb><spanclass="visually-hidden"id="doc-outline-aria-label"data-v-d330b1bb> Table of Contents for current page </span><ulclass="root"data-v-d330b1bbdata-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><divclass="spacer"data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><divclass="content"data-v-6b87e69f><divclass="content-container"data-v-6b87e69f><!--[--><!--]--><!----><mainclass="main"data-v-6b87e69f><divstyle="position:relative;"class="vp-doc _public_gamedevtree_docs_clickables"data-v-6b87e69f><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 github-dark vp-code-dark"><code><spanclass="line"><spanstyle="color:#E1E4E8;"></span><spanstyle="color:#B392F0;">clickables</span><spanstyle="color:#E1E4E8;">: {</span></span>
<spanclass="line"><spanstyle="color:#E1E4E8;"></span><spanstyle="color:#B392F0;">masterButtonPress</span><spanstyle="color:#E1E4E8;">() </span><spanstyle="color:#6A737D;">// **optional** If this is present, an additional button will appear above the clickables.</span></span>
<spanclass="line"><spanstyle="color:#E1E4E8;"></span><spanstyle="color:#6A737D;">// pressing it will call the function.</span></span>
<spanclass="line"><spanstyle="color:#E1E4E8;"></span><spanstyle="color:#B392F0;">masterButtonText</span><spanstyle="color:#E1E4E8;">: </span><spanstyle="color:#9ECBFF;">"Press me!"</span><spanstyle="color:#E1E4E8;"></span><spanstyle="color:#6A737D;">// **optional** text to display on the Master Button</span></span>
<spanclass="line"><spanstyle="color:#E1E4E8;"></span><spanstyle="color:#B392F0;">showMasterButton</span><spanstyle="color:#E1E4E8;">(){} </span><spanstyle="color:#6A737D;">//**optional**, a function determining whether or not to show the button. Defaults to true if absent.</span></span>
<spanclass="line"><spanstyle="color:#24292E;"></span><spanstyle="color:#6F42C1;">masterButtonPress</span><spanstyle="color:#24292E;">() </span><spanstyle="color:#6A737D;">// **optional** If this is present, an additional button will appear above the clickables.</span></span>
<spanclass="line"><spanstyle="color:#24292E;"></span><spanstyle="color:#6A737D;">// pressing it will call the function.</span></span>
<spanclass="line"><spanstyle="color:#24292E;"></span><spanstyle="color:#6F42C1;">masterButtonText</span><spanstyle="color:#24292E;">: </span><spanstyle="color:#032F62;">"Press me!"</span><spanstyle="color:#24292E;"></span><spanstyle="color:#6A737D;">// **optional** text to display on the Master Button</span></span>
<spanclass="line"><spanstyle="color:#24292E;"></span><spanstyle="color:#6F42C1;">showMasterButton</span><spanstyle="color:#24292E;">(){} </span><spanstyle="color:#6A737D;">//**optional**, a function determining whether or not to show the button. Defaults to true if absent.</span></span>
<spanclass="line"><spanstyle="color:#24292E;"> }</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-6b87e69fdata-v-ef5dee53><!--[--><!--]--><divclass="edit-info"data-v-ef5dee53><!----><divclass="last-updated"data-v-ef5dee53><pclass="VPLastUpdated"data-v-ef5dee53data-v-7e05ebdb>Last updated: <timedatetime="2021-05-19T01:41:49.000Z"data-v-7e05ebdb></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
