profectus-docs/assets/guide_recipes_prestige.md.d47bb886.js

import{_ as s,c as e,o as a,N as n}from"./chunks/framework.0799945b.js";const F=JSON.parse('{"title":"Prestige Mechanic","description":"","frontmatter":{},"headers":[],"relativePath":"guide/recipes/prestige.md","lastUpdated":1682267650000}'),o={name:"guide/recipes/prestige.md"},t=n(`<h1 id="prestige-mechanic" tabindex="-1">Prestige Mechanic <a class="header-anchor" href="#prestige-mechanic" aria-label="Permalink to &quot;Prestige Mechanic&quot;">​</a></h1><p>Prestige mechanics are a common feature in incremental games. They involve resetting a portion of the game&#39;s progress in exchange for a new currency that persists between these resets. Many games even have multiple layers of reset mechanics, each resetting everything that came before them.</p><h2 id="create-a-conversion" tabindex="-1">Create a conversion <a class="header-anchor" href="#create-a-conversion" aria-label="Permalink to &quot;Create a conversion&quot;">​</a></h2><p>The first step is to create a conversion that will handle calculating the amount of prestige currency generated. In our example, let&#39;s assume there&#39;s a base layer called <code>main</code> and a prestige layer called <code>prestige</code>. This conversion will be based on the amount of <code>points</code> the player has, a resource within <code>main</code>. Here&#39;s an example conversion, using the formula from <a href="https://jacorb90.me/Prestige-Tree/" target="_blank" rel="noreferrer">The Prestige Tree</a>&#39;s prestige layer:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> conversion </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createCumulativeConversion</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">baseResource</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> main</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">gainResource</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">noPersist</span><span style="color:#A6ACCD;">(points)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#82AAFF;">formula</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">x</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> x</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">div</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">sqrt</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>In this case, <code>points</code> refers to <code>prestige.points</code>, as it&#39;s within the <code>prestige</code> layer.</p><h2 id="create-a-reset-button" tabindex="-1">Create a reset button <a class="header-anchor" href="#create-a-reset-button" aria-label="Permalink to &quot;Create a reset button&quot;">​</a></h2><p>Next, create a button that will perform the reset and generate points. Create a clickable like this:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> convertButton </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createClickable</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">requirements</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createBooleanRequirement</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> Decimal</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">gt</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">unref</span><span style="color:#A6ACCD;">(conversion</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">actualGain)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#82AAFF;">description</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">Reset for </span><span style="color:#89DDFF;">\${</span><span style="color:#82AAFF;">formatWhole</span><span style="color:#A6ACCD;">(conversion</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentGain)</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> prestige points</span><span style="color:#89DDFF;">\`</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">onClick</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">		</span><span style="color:#A6ACCD;">conversion</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">convert</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>This creates a simple clickable that can only be clicked when the player will gain some amount of the prestige currency, and it displays how much they&#39;ll get. This can be further improved by displaying how many points the player will need to generate one more prestige point.</p><h2 id="resetting-previous-content" tabindex="-1">Resetting previous content <a class="header-anchor" href="#resetting-previous-content" aria-label="Permalink to &quot;Resetting previous content&quot;">​</a></h2><p>Now, return to the <code>main</code> layer. Create a <code>reset</code> feature that receives a list of all the things it needs to reset - in this example, we&#39;ll just reset the entire layer:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> reset </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createReset</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#F07178;">thingsToReset</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [layer]</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>Then, modify the convert button to trigger the reset:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">onClick</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">conversion</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">convert</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">	</span><span style="color:#A6ACCD;">reset</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reset</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>If you have multiple tiers of resets, you may add an <code>onReset</code> function to each reset that triggers the next reset before it, causing the resets to cascade.</p><h2 id="branching-resets" tabindex="-1">Branching resets <a class="header-anchor" href="#branching-resets" aria-label="Permalink to &quot;Branching resets&quot;">​</a></h2><p>A common pattern for reset mechanics is to display these various layers in a tree and have the tree propagate the resets for you. There are a couple of utility functions to help you accomplish this: <a href="./../../api/modules/data/common#createresetbutton">createResetButton</a> and <a href="./../../api/modules/data/common#createlayertreenode">createLayerTreeNode</a>. You&#39;ll typically place the tree itself in the <code>main</code> layer and create a tree node for each layer. Then you can call the tree&#39;s <code>reset</code> function with the layer that&#39;s resetting, and it will propagate the reset as appropriate.</p>`,18),l=[t];function p(r,c,i,y,D,A){return a(),e("div",null,l)}const h=s(o,[["render",p]]);export{F as __pageData,h as default};