<divid="app"><divclass="Layout"data-v-5d98c3a5><!--[--><!--]--><!--[--><spantabindex="-1"data-v-0f60ec36></span><ahref="#VPContent"class="VPSkipLink visually-hidden"data-v-0f60ec36> Skip to content </a><!--]--><!----><headerclass="VPNav"data-v-5d98c3a5data-v-ae24b3ad><divclass="VPNavBar top"data-v-ae24b3addata-v-ccf7ddec><divclass="wrapper"data-v-ccf7ddec><divclass="container"data-v-ccf7ddec><divclass="title"data-v-ccf7ddec><divclass="VPNavBarTitle"data-v-ccf7ddecdata-v-ab179fa1><aclass="title"href="/"data-v-ab179fa1><!--[--><!--]--><!----><spandata-v-ab179fa1>The Paper Pilot</span><!--[--><!--]--></a></div></div><divclass="content"data-v-ccf7ddec><divclass="content-body"data-v-ccf7ddec><!--[--><!--]--><divclass="VPNavBarSearch search"data-v-ccf7ddec><!----></div><navaria-labelledby="main-nav-aria-label"class="VPNavBarMenu menu"data-v-ccf7ddecdata-v-7f418b0f><spanid="main-nav-aria-label"class="visually-hidden"data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/guide-to-incrementals/"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Guide to Incrementals</span><!--]--></a><!--]--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/projects/"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Projects</span><!--]--></a><!--]--><!--[--><aclass="VPLink link vp-external-link-icon VPNavBarMenuLink"href="https://moddingtree.com"target="_blank"rel="noreferrer"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Profectus</span><!--]--></a><!--]--><!--]--></nav><!----><divclass="VPNavBarAppearance appearance"data-v-ccf7ddecdata-v-e6aabb21><buttonclass="VPSwitch VPSwitchAppearance"type="button"role="switch"title="Switch to dark theme"aria-checked="false"data-v-e6aabb21data-v-d1f28634data-v-1d5665e3><spanclass="check"data-v-1d5665e3><spanclass="icon"data-v-1d5665e3><!--[--><spanclass="vpi-sun sun"data-v-d1f28634></span><spanclass="vpi-moon moon"data-v-d1f28634></span><!--]--></span></span></button></div><divclass="VPSocialLinks VPNavBarSocialLinks social-links"data-v-ccf7ddecdata-v-0394ad82data-v-7bc22406><!--[--><aclass="VPSocialLink no-icon"href="https://github.com/thepaperpilot"aria-label="github"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-github"/></a><aclass="VPSocialLink no-icon"href="https://www.linkedin.com/pub/anthony-lawn/a9/a98/2"aria-label="linkedin"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-linkedin"/></a><aclass="VPSocialLink no-icon"href="https://discord.gg/yJ4fjnjU54"aria-label="discord"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-discord"/></a><aclass="VPSocialLink no-icon"href="https://mastodon.gamedev.place/@thepaperpilot"aria-labeltarget="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="currentColor"class="bi bi-mastodon"viewBox="0 0 16 16">
</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>
