7 lines
5.2 KiB
JavaScript
7 lines
5.2 KiB
JavaScript
import{_ as e,c as t,o as a,a9 as s}from"./chunks/framework.D8PMdl4T.js";const b=JSON.parse('{"title":"Clickables","description":"","frontmatter":{},"headers":[],"relativePath":"public/kronos/docs/clickables.md","filePath":"public/kronos/docs/clickables.md","lastUpdated":1621020740000}'),i={name:"public/kronos/docs/clickables.md"},l=s(`<h1 id="clickables" tabindex="-1">Clickables <a class="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 <code>Decimal</code>, while Clickables store a "state" which can be a number or string, but not <code>Decimal</code>, 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>Useful functions for dealing with clickables and implementing their effects:</p><ul><li>getClickableState(layer, id): get the state of the clickable the player has</li><li>setClickableState(layer, id, state): set the state of the clickable the player has</li><li>clickableEffect(layer, id): Returns the current effects of the clickable, if any.</li></ul><p>Clickables should be formatted like this:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clickables</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 11</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Blah"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> etc</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> etc</span></span>
|
||
<span class="line"><span style="--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 the clickable.</p></li><li><p>onHold(): <strong>optional</strong> A function that is called 20x/sec when the button is held for at least 0.25 seconds.</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>marked: <strong>optional</strong> 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.</p></li><li><p>layer: <strong>assigned automagically</strong>. It's the same value as the name of this layer, so you can do <code>player[this.layer].points</code> 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><p>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.</p><ul><li><p>masterButtonPress(): <strong>optional</strong>. If present, an additional button will appear above the clickables. Pressing it will call this function.</p></li><li><p>masterButtonText: <strong>optional</strong>. Text to display on the Master Button.</p></li><li><p>showMasterButton(): <strong>optional</strong>. A function determining whether or not to show the button, if masterButtonPress is defined. Defaults to true if absent.</p></li></ul>`,12),n=[l];function o(c,r,p,h,u,d){return a(),t("div",null,n)}const g=e(i,[["render",o]]);export{b as __pageData,g as default};
|