Deploying to gh-pages from @ profectus-engine/profectus-docs@8e4c68ef1e 🚀

assets/guide_advanced-concepts_creating-features.md.4c4ef16d.lean.js

@@ -1 +1 @@
-import{_ as s,c as e,o as a,N as n}from"./chunks/framework.0799945b.js";const d=JSON.parse('{"title":"Creating Features","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/creating-features.md","lastUpdated":1681870292000}'),o={name:"guide/advanced-concepts/creating-features.md"},t=n("",19),l=[t];function p(r,c,y,i,F,D){return a(),e("div",null,l)}const C=s(o,[["render",p]]);export{d as __pageData,C as default};
+import{_ as s,c as e,o as a,N as n}from"./chunks/framework.0799945b.js";const d=JSON.parse('{"title":"Creating Features","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/creating-features.md","lastUpdated":1681878045000}'),o={name:"guide/advanced-concepts/creating-features.md"},t=n("",19),l=[t];function p(r,c,y,i,F,D){return a(),e("div",null,l)}const C=s(o,[["render",p]]);export{d as __pageData,C as default};

assets/guide_advanced-concepts_dynamic-layers.md.42dd7b45.js

@@ -1,4 +1,4 @@
-import{_ as a,c as s,o as e,N as n}from"./chunks/framework.0799945b.js";const D=JSON.parse('{"title":"Dynamic Layers","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/dynamic-layers.md","lastUpdated":1681870292000}'),o={name:"guide/advanced-concepts/dynamic-layers.md"},l=n(`<h1 id="dynamic-layers" tabindex="-1">Dynamic Layers <a class="header-anchor" href="#dynamic-layers" aria-label="Permalink to &quot;Dynamic Layers&quot;">​</a></h1><p>You can dynamically add and remove layers using the <a href="/api/modules/game/layers#addlayer">addLayer</a> and <a href="/api/modules/game/layers#removelayer">removeLayer</a> functions. It&#39;s important to note that removing a layer does not affect the player&#39;s save data. You can safely add and remove the same layer without losing any progress. For instances where the structure of a layer changes, such as when adding a new feature, use the <a href="/api/modules/game/layers#reloadlayer">reloadLayer</a> function.</p><p>When procedurally generating layers with similar structures, consider using a utility function like the one below. This function allows you to access a correctly typed reference to a layer with a specified ID easily:</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;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getDynLayer</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DynamicLayer</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+import{_ as a,c as s,o as e,N as n}from"./chunks/framework.0799945b.js";const D=JSON.parse('{"title":"Dynamic Layers","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/dynamic-layers.md","lastUpdated":1681878045000}'),o={name:"guide/advanced-concepts/dynamic-layers.md"},l=n(`<h1 id="dynamic-layers" tabindex="-1">Dynamic Layers <a class="header-anchor" href="#dynamic-layers" aria-label="Permalink to &quot;Dynamic Layers&quot;">​</a></h1><p>You can dynamically add and remove layers using the <a href="/api/modules/game/layers#addlayer">addLayer</a> and <a href="/api/modules/game/layers#removelayer">removeLayer</a> functions. It&#39;s important to note that removing a layer does not affect the player&#39;s save data. You can safely add and remove the same layer without losing any progress. For instances where the structure of a layer changes, such as when adding a new feature, use the <a href="/api/modules/game/layers#reloadlayer">reloadLayer</a> function.</p><p>When procedurally generating layers with similar structures, consider using a utility function like the one below. This function allows you to access a correctly typed reference to a layer with a specified ID easily:</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;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getDynLayer</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DynamicLayer</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layers</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">layer</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">throw</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Layer does not exist</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">DynamicLayer</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// you might need an &quot;as unknown&quot; after layer</span></span>

assets/guide_advanced-concepts_dynamic-layers.md.42dd7b45.lean.js

@@ -1 +1 @@
-import{_ as a,c as s,o as e,N as n}from"./chunks/framework.0799945b.js";const D=JSON.parse('{"title":"Dynamic Layers","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/dynamic-layers.md","lastUpdated":1681870292000}'),o={name:"guide/advanced-concepts/dynamic-layers.md"},l=n("",6),t=[l];function r(p,c,y,i,d,u){return e(),s("div",null,t)}const h=a(o,[["render",r]]);export{D as __pageData,h as default};
+import{_ as a,c as s,o as e,N as n}from"./chunks/framework.0799945b.js";const D=JSON.parse('{"title":"Dynamic Layers","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/dynamic-layers.md","lastUpdated":1681878045000}'),o={name:"guide/advanced-concepts/dynamic-layers.md"},l=n("",6),t=[l];function r(p,c,y,i,d,u){return e(),s("div",null,t)}const h=a(o,[["render",r]]);export{D as __pageData,h as default};

assets/guide_advanced-concepts_nodes.md.2dc4bc54.js

@@ -1,4 +1,4 @@
-import{_ as s,c as n,o as a,N as o}from"./chunks/framework.0799945b.js";const C=JSON.parse('{"title":"Nodes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/nodes.md","lastUpdated":1681870292000}'),l={name:"guide/advanced-concepts/nodes.md"},e=o(`<h1 id="nodes" tabindex="-1">Nodes <a class="header-anchor" href="#nodes" aria-label="Permalink to &quot;Nodes&quot;">​</a></h1><p>Features rendered in the DOM should include a <code>Node</code> component, which registers itself to the nearest <code>Context</code> component (usually within the <code>Layer</code>&#39;s component) and tracks the bounding rect (both size and position) of the DOM element. Access the DOM element for a feature via its unique <code>id</code> property within <code>layer.nodes</code>, provided it currently exists.</p><p>This is useful for features with complex displays, such as particle effects positioned relative to another feature or drawing links between different nodes. To illustrate this, let&#39;s look at a complete example of using <code>layer.nodes</code> to get a node&#39;s bounding rect and then placing a particle effect using it. Here&#39;s an example from Kronos:</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;"> particlesEmitter </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(particles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEmitter</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">particlesConfig))</span><span style="color:#89DDFF;">;</span></span>
+import{_ as s,c as n,o as a,N as o}from"./chunks/framework.0799945b.js";const C=JSON.parse('{"title":"Nodes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/nodes.md","lastUpdated":1681878045000}'),l={name:"guide/advanced-concepts/nodes.md"},e=o(`<h1 id="nodes" tabindex="-1">Nodes <a class="header-anchor" href="#nodes" aria-label="Permalink to &quot;Nodes&quot;">​</a></h1><p>Features rendered in the DOM should include a <code>Node</code> component, which registers itself to the nearest <code>Context</code> component (usually within the <code>Layer</code>&#39;s component) and tracks the bounding rect (both size and position) of the DOM element. Access the DOM element for a feature via its unique <code>id</code> property within <code>layer.nodes</code>, provided it currently exists.</p><p>This is useful for features with complex displays, such as particle effects positioned relative to another feature or drawing links between different nodes. To illustrate this, let&#39;s look at a complete example of using <code>layer.nodes</code> to get a node&#39;s bounding rect and then placing a particle effect using it. Here&#39;s an example from Kronos:</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;"> particlesEmitter </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(particles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEmitter</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">particlesConfig))</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> updateParticleEffect </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> ([shouldEmit</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> rect</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> boundingRect]</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">,</span></span>
 <span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#FFCB6B;">DOMRect</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">undefined</span><span style="color:#89DDFF;">,</span></span>

assets/guide_advanced-concepts_nodes.md.2dc4bc54.lean.js

@@ -1 +1 @@
-import{_ as s,c as n,o as a,N as o}from"./chunks/framework.0799945b.js";const C=JSON.parse('{"title":"Nodes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/nodes.md","lastUpdated":1681870292000}'),l={name:"guide/advanced-concepts/nodes.md"},e=o("",6),p=[e];function t(c,r,y,D,F,i){return a(),n("div",null,p)}const d=s(l,[["render",t]]);export{C as __pageData,d as default};
+import{_ as s,c as n,o as a,N as o}from"./chunks/framework.0799945b.js";const C=JSON.parse('{"title":"Nodes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-concepts/nodes.md","lastUpdated":1681878045000}'),l={name:"guide/advanced-concepts/nodes.md"},e=o("",6),p=[e];function t(c,r,y,D,F,i){return a(),n("div",null,p)}const d=s(l,[["render",t]]);export{C as __pageData,d as default};

assets/guide_creating-your-project_changelog.md.8ee4e9ee.js

@@ -1,4 +1,4 @@
-import{_ as s,c as a,o as n,N as e}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Changelog","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/changelog.md","lastUpdated":1681870292000}'),l={name:"guide/creating-your-project/changelog.md"},o=e(`<h1 id="changelog" tabindex="-1">Changelog <a class="header-anchor" href="#changelog" aria-label="Permalink to &quot;Changelog&quot;">​</a></h1><p>This is a Vue component stored at <code>/src/data/Changelog.vue</code> used to display all the changes version to version. You can use any features you&#39;d like within here, but it&#39;s recommended to simply add new <code>&lt;details&gt;</code> elements for each new major release, and mark the most recent one as <code>open</code> by default. It is strongly advised to not change any of the code relating to making the changelog appear in a modal.</p><p>There is a single version included by default that can serve as a reference of how it is recommended to add a version to the changelog:</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">details</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">open</span><span style="color:#89DDFF;">&gt;</span></span>
+import{_ as s,c as a,o as n,N as e}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Changelog","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/changelog.md","lastUpdated":1681878045000}'),l={name:"guide/creating-your-project/changelog.md"},o=e(`<h1 id="changelog" tabindex="-1">Changelog <a class="header-anchor" href="#changelog" aria-label="Permalink to &quot;Changelog&quot;">​</a></h1><p>This is a Vue component stored at <code>/src/data/Changelog.vue</code> used to display all the changes version to version. You can use any features you&#39;d like within here, but it&#39;s recommended to simply add new <code>&lt;details&gt;</code> elements for each new major release, and mark the most recent one as <code>open</code> by default. It is strongly advised to not change any of the code relating to making the changelog appear in a modal.</p><p>There is a single version included by default that can serve as a reference of how it is recommended to add a version to the changelog:</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">details</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">open</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">summary</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">v0.0 Initial Commit - </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">2021-09-04</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">time</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">summary</span><span style="color:#89DDFF;">&gt;</span></span>
 <span class="line"><span style="color:#A6ACCD;">	This is the first release :D</span></span>
 <span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">&gt;</span></span>

assets/guide_creating-your-project_changelog.md.8ee4e9ee.lean.js

@@ -1 +1 @@
-import{_ as s,c as a,o as n,N as e}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Changelog","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/changelog.md","lastUpdated":1681870292000}'),l={name:"guide/creating-your-project/changelog.md"},o=e("",6),t=[o];function p(c,r,D,i,F,y){return n(),a("div",null,t)}const h=s(l,[["render",p]]);export{g as __pageData,h as default};
+import{_ as s,c as a,o as n,N as e}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Changelog","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/changelog.md","lastUpdated":1681878045000}'),l={name:"guide/creating-your-project/changelog.md"},o=e("",6),t=[o];function p(c,r,D,i,F,y){return n(),a("div",null,t)}const h=s(l,[["render",p]]);export{g as __pageData,h as default};

assets/guide_creating-your-project_project-entry.md.f0a6c223.js

@@ -1 +1 @@
-import{_ as e,c as a,o as t,N as o}from"./chunks/framework.0799945b.js";const f=JSON.parse('{"title":"Project Entry","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/project-entry.md","lastUpdated":1681870292000}'),s={name:"guide/creating-your-project/project-entry.md"},r=o('<h1 id="project-entry" tabindex="-1">Project Entry <a class="header-anchor" href="#project-entry" aria-label="Permalink to &quot;Project Entry&quot;">​</a></h1><p>This is a TypeScript file containing the non-static parts of your project, and acts as the entry point for it.</p><p>It is stored at <code>/src/data/projEntry.jsx</code>.</p><p>This file has 3 things it must export, but beyond that can export anything the creator wants it to. Typically in addition to the required 3, the initial/&quot;main&quot; layer will be exported. Typically utilites belong in <code>common.tsx</code>, which exists next to <code>projEntry.tsx</code>.</p><h2 id="required-exports" tabindex="-1">Required Exports <a class="header-anchor" href="#required-exports" aria-label="Permalink to &quot;Required Exports&quot;">​</a></h2><h3 id="getinitiallayers" tabindex="-1">getInitialLayers <a class="header-anchor" href="#getinitiallayers" aria-label="Permalink to &quot;getInitialLayers&quot;">​</a></h3><ul><li>Type: <code>(player: Partial&lt;PlayerData&gt;) =&gt; GenericLayer[]</code></li></ul><p>A function that is given a player save data object currently being loaded, and returns a list of layers that should be active for that player. If a project does not have dynamic layers, this should always return a list of all layers.</p><h3 id="haswon" tabindex="-1">hasWon <a class="header-anchor" href="#haswon" aria-label="Permalink to &quot;hasWon&quot;">​</a></h3><ul><li>Type: <code>ComputedRef&lt;boolean&gt;</code></li></ul><p>A computed ref whose value is true whenever the game is over.</p><p>For example, in a game where the goal is to have a resource reach 10:</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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> hasWon </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">computed</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;">gte</span><span style="color:#A6ACCD;">(resource</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="fixoldsave" tabindex="-1">fixOldSave <a class="header-anchor" href="#fixoldsave" aria-label="Permalink to &quot;fixOldSave&quot;">​</a></h3><ul><li>Type: <code>(oldVersion: string | undefined, player: Partial&lt;PlayerData&gt;) =&gt; void</code></li></ul><p>This function will be run whenever a save is loaded that has a different version than the one in <a href="./project-info#versionnumber">project info</a>. It will be given the old version number, and the player save data object currently being loaded.</p><p>The purpose of this function is to perform any necessary migrations, such as capping a resource that accidentally inflated in a previous version of the project. By default it will do nothing.</p>',17),n=[r];function l(i,p,c,d,h,y){return t(),a("div",null,n)}const g=e(s,[["render",l]]);export{f as __pageData,g as default};
+import{_ as e,c as a,o as t,N as o}from"./chunks/framework.0799945b.js";const f=JSON.parse('{"title":"Project Entry","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/project-entry.md","lastUpdated":1681878045000}'),s={name:"guide/creating-your-project/project-entry.md"},r=o('<h1 id="project-entry" tabindex="-1">Project Entry <a class="header-anchor" href="#project-entry" aria-label="Permalink to &quot;Project Entry&quot;">​</a></h1><p>This is a TypeScript file containing the non-static parts of your project, and acts as the entry point for it.</p><p>It is stored at <code>/src/data/projEntry.jsx</code>.</p><p>This file has 3 things it must export, but beyond that can export anything the creator wants it to. Typically in addition to the required 3, the initial/&quot;main&quot; layer will be exported. Typically utilites belong in <code>common.tsx</code>, which exists next to <code>projEntry.tsx</code>.</p><h2 id="required-exports" tabindex="-1">Required Exports <a class="header-anchor" href="#required-exports" aria-label="Permalink to &quot;Required Exports&quot;">​</a></h2><h3 id="getinitiallayers" tabindex="-1">getInitialLayers <a class="header-anchor" href="#getinitiallayers" aria-label="Permalink to &quot;getInitialLayers&quot;">​</a></h3><ul><li>Type: <code>(player: Partial&lt;PlayerData&gt;) =&gt; GenericLayer[]</code></li></ul><p>A function that is given a player save data object currently being loaded, and returns a list of layers that should be active for that player. If a project does not have dynamic layers, this should always return a list of all layers.</p><h3 id="haswon" tabindex="-1">hasWon <a class="header-anchor" href="#haswon" aria-label="Permalink to &quot;hasWon&quot;">​</a></h3><ul><li>Type: <code>ComputedRef&lt;boolean&gt;</code></li></ul><p>A computed ref whose value is true whenever the game is over.</p><p>For example, in a game where the goal is to have a resource reach 10:</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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> hasWon </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">computed</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;">gte</span><span style="color:#A6ACCD;">(resource</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="fixoldsave" tabindex="-1">fixOldSave <a class="header-anchor" href="#fixoldsave" aria-label="Permalink to &quot;fixOldSave&quot;">​</a></h3><ul><li>Type: <code>(oldVersion: string | undefined, player: Partial&lt;PlayerData&gt;) =&gt; void</code></li></ul><p>This function will be run whenever a save is loaded that has a different version than the one in <a href="./project-info#versionnumber">project info</a>. It will be given the old version number, and the player save data object currently being loaded.</p><p>The purpose of this function is to perform any necessary migrations, such as capping a resource that accidentally inflated in a previous version of the project. By default it will do nothing.</p>',17),n=[r];function l(i,p,c,d,h,y){return t(),a("div",null,n)}const g=e(s,[["render",l]]);export{f as __pageData,g as default};

assets/guide_creating-your-project_project-entry.md.f0a6c223.lean.js

@@ -1 +1 @@
-import{_ as e,c as a,o as t,N as o}from"./chunks/framework.0799945b.js";const f=JSON.parse('{"title":"Project Entry","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/project-entry.md","lastUpdated":1681870292000}'),s={name:"guide/creating-your-project/project-entry.md"},r=o("",17),n=[r];function l(i,p,c,d,h,y){return t(),a("div",null,n)}const g=e(s,[["render",l]]);export{f as __pageData,g as default};
+import{_ as e,c as a,o as t,N as o}from"./chunks/framework.0799945b.js";const f=JSON.parse('{"title":"Project Entry","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/project-entry.md","lastUpdated":1681878045000}'),s={name:"guide/creating-your-project/project-entry.md"},r=o("",17),n=[r];function l(i,p,c,d,h,y){return t(),a("div",null,n)}const g=e(s,[["render",l]]);export{f as __pageData,g as default};

assets/guide_creating-your-project_project-info.md.a3cc873e.lean.js

@@ -1 +1 @@
-import{_ as e,c as a,o,N as t}from"./chunks/framework.0799945b.js";const b=JSON.parse('{"title":"Project Info","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/project-info.md","lastUpdated":1681870292000}'),i={name:"guide/creating-your-project/project-info.md"},l=t("",66),r=[l];function n(s,d,c,h,u,p){return o(),a("div",null,r)}const m=e(i,[["render",n]]);export{b as __pageData,m as default};
+import{_ as e,c as a,o,N as t}from"./chunks/framework.0799945b.js";const b=JSON.parse('{"title":"Project Info","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/project-info.md","lastUpdated":1681878045000}'),i={name:"guide/creating-your-project/project-info.md"},l=t("",66),r=[l];function n(s,d,c,h,u,p){return o(),a("div",null,r)}const m=e(i,[["render",n]]);export{b as __pageData,m as default};

assets/guide_creating-your-project_themes.md.2250bb2d.js

@@ -1 +1 @@
-import{_ as e,c as t,o as a,N as o}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Themes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/themes.md","lastUpdated":1681870292000}'),i={name:"guide/creating-your-project/themes.md"},s=o('<h1 id="themes" tabindex="-1">Themes <a class="header-anchor" href="#themes" aria-label="Permalink to &quot;Themes&quot;">​</a></h1><p>Themes are objects that change how the project&#39;s interface should look. This is done mostly by changing the values of various CSS variables. You can look at the existing themes as a reference for the kind of values these CSS variables expect. They can also set various theme options that change how parts of the screen are laid out, which are described <a href="#theme-options">below</a>.</p><p>They are stored in <code>/src/data/themes.ts</code>.</p><h2 id="modifying-themes" tabindex="-1">Modifying Themes <a class="header-anchor" href="#modifying-themes" aria-label="Permalink to &quot;Modifying Themes&quot;">​</a></h2><p>You can add a theme by adding a property to the <code>Themes</code> enum and then including the theme in the exported object. It&#39;s recommended to use the spread operator if you&#39;d like to have a theme look like another, but override specific options / CSS variables.</p><p>Themes added in this way will be automatically included in the Themes dropdown in the Options tab. Removing themes from the enum and exported object will similarly hide them from the dropdown.</p><p>If you&#39;d like to change which theme is the default, you may modify the initial player settings object in the <code>/src/game/settings.ts</code> file. Keep in mind you&#39;ll also want to change it in the <code>hardResetSettings</code> function in the same file.</p><h2 id="theme-options" tabindex="-1">Theme Options <a class="header-anchor" href="#theme-options" aria-label="Permalink to &quot;Theme Options&quot;">​</a></h2><h3 id="floatingtabs" tabindex="-1">floatingTabs <a class="header-anchor" href="#floatingtabs" aria-label="Permalink to &quot;floatingTabs&quot;">​</a></h3><ul><li>Type: <code>boolean</code></li></ul><p>Toggles whether to display tab buttons in a tab list, similar to how a browser displays tabs; or to display them as floating buttons, similar to how TMT displays buttons.</p><h3 id="mergeadjacent" tabindex="-1">mergeAdjacent <a class="header-anchor" href="#mergeadjacent" aria-label="Permalink to &quot;mergeAdjacent&quot;">​</a></h3><ul><li>Type: <code>boolean</code></li></ul><p>If true, elements in a row or column will have their margins removed and border radiuses set to 0 between elements. This will cause the elements to appear as segments in a single object.</p><p>Currently, this can only merge in a single dimension. Rows of columns or columns of rows will not merge into a single rectangular object.</p>',15),n=[s];function r(h,l,d,c,m,p){return a(),t("div",null,n)}const b=e(i,[["render",r]]);export{g as __pageData,b as default};
+import{_ as e,c as t,o as a,N as o}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Themes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/themes.md","lastUpdated":1681878045000}'),i={name:"guide/creating-your-project/themes.md"},s=o('<h1 id="themes" tabindex="-1">Themes <a class="header-anchor" href="#themes" aria-label="Permalink to &quot;Themes&quot;">​</a></h1><p>Themes are objects that change how the project&#39;s interface should look. This is done mostly by changing the values of various CSS variables. You can look at the existing themes as a reference for the kind of values these CSS variables expect. They can also set various theme options that change how parts of the screen are laid out, which are described <a href="#theme-options">below</a>.</p><p>They are stored in <code>/src/data/themes.ts</code>.</p><h2 id="modifying-themes" tabindex="-1">Modifying Themes <a class="header-anchor" href="#modifying-themes" aria-label="Permalink to &quot;Modifying Themes&quot;">​</a></h2><p>You can add a theme by adding a property to the <code>Themes</code> enum and then including the theme in the exported object. It&#39;s recommended to use the spread operator if you&#39;d like to have a theme look like another, but override specific options / CSS variables.</p><p>Themes added in this way will be automatically included in the Themes dropdown in the Options tab. Removing themes from the enum and exported object will similarly hide them from the dropdown.</p><p>If you&#39;d like to change which theme is the default, you may modify the initial player settings object in the <code>/src/game/settings.ts</code> file. Keep in mind you&#39;ll also want to change it in the <code>hardResetSettings</code> function in the same file.</p><h2 id="theme-options" tabindex="-1">Theme Options <a class="header-anchor" href="#theme-options" aria-label="Permalink to &quot;Theme Options&quot;">​</a></h2><h3 id="floatingtabs" tabindex="-1">floatingTabs <a class="header-anchor" href="#floatingtabs" aria-label="Permalink to &quot;floatingTabs&quot;">​</a></h3><ul><li>Type: <code>boolean</code></li></ul><p>Toggles whether to display tab buttons in a tab list, similar to how a browser displays tabs; or to display them as floating buttons, similar to how TMT displays buttons.</p><h3 id="mergeadjacent" tabindex="-1">mergeAdjacent <a class="header-anchor" href="#mergeadjacent" aria-label="Permalink to &quot;mergeAdjacent&quot;">​</a></h3><ul><li>Type: <code>boolean</code></li></ul><p>If true, elements in a row or column will have their margins removed and border radiuses set to 0 between elements. This will cause the elements to appear as segments in a single object.</p><p>Currently, this can only merge in a single dimension. Rows of columns or columns of rows will not merge into a single rectangular object.</p>',15),n=[s];function r(h,l,d,c,m,p){return a(),t("div",null,n)}const b=e(i,[["render",r]]);export{g as __pageData,b as default};

assets/guide_creating-your-project_themes.md.2250bb2d.lean.js

@@ -1 +1 @@
-import{_ as e,c as t,o as a,N as o}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Themes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/themes.md","lastUpdated":1681870292000}'),i={name:"guide/creating-your-project/themes.md"},s=o("",15),n=[s];function r(h,l,d,c,m,p){return a(),t("div",null,n)}const b=e(i,[["render",r]]);export{g as __pageData,b as default};
+import{_ as e,c as t,o as a,N as o}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Themes","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/themes.md","lastUpdated":1681878045000}'),i={name:"guide/creating-your-project/themes.md"},s=o("",15),n=[s];function r(h,l,d,c,m,p){return a(),t("div",null,n)}const b=e(i,[["render",r]]);export{g as __pageData,b as default};

assets/guide_creating-your-project_utils.md.8665c69a.js

@@ -1 +1 @@
-import{_ as a,c as o,o as s,x as e,a as t}from"./chunks/framework.0799945b.js";const b=JSON.parse('{"title":"Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/utils.md","lastUpdated":1681870292000}'),i={name:"guide/creating-your-project/utils.md"},n=e("h1",{id:"utilities",tabindex:"-1"},[t("Utilities "),e("a",{class:"header-anchor",href:"#utilities","aria-label":'Permalink to "Utilities"'},"​")],-1),r=e("p",null,"There are often concepts that aren't inherent to a single feature, but rather work with joining different features together. For example, a reset clickable that activates a conversion and resets a tree, which happens to be a common use case but isn't inherent to clickables, conversions, or trees.",-1),c=e("p",null,[t("These are perfect situations for utilities, and so to encourage creators to learn to identify and take advantage of these situations, a file called "),e("code",null,"src/data/common.tsx"),t(" has been created to demo some of the more common utility functions a project might use. Adding new utilities to this file is encouraged, as is creating utils in general. It also works as a good stepping stone to creating your own features.")],-1),l=[n,r,c];function d(u,h,p,f,m,_){return s(),o("div",null,l)}const k=a(i,[["render",d]]);export{b as __pageData,k as default};
+import{_ as a,c as o,o as s,x as e,a as t}from"./chunks/framework.0799945b.js";const b=JSON.parse('{"title":"Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/utils.md","lastUpdated":1681878045000}'),i={name:"guide/creating-your-project/utils.md"},n=e("h1",{id:"utilities",tabindex:"-1"},[t("Utilities "),e("a",{class:"header-anchor",href:"#utilities","aria-label":'Permalink to "Utilities"'},"​")],-1),r=e("p",null,"There are often concepts that aren't inherent to a single feature, but rather work with joining different features together. For example, a reset clickable that activates a conversion and resets a tree, which happens to be a common use case but isn't inherent to clickables, conversions, or trees.",-1),c=e("p",null,[t("These are perfect situations for utilities, and so to encourage creators to learn to identify and take advantage of these situations, a file called "),e("code",null,"src/data/common.tsx"),t(" has been created to demo some of the more common utility functions a project might use. Adding new utilities to this file is encouraged, as is creating utils in general. It also works as a good stepping stone to creating your own features.")],-1),l=[n,r,c];function d(u,h,p,f,m,_){return s(),o("div",null,l)}const k=a(i,[["render",d]]);export{b as __pageData,k as default};

assets/guide_creating-your-project_utils.md.8665c69a.lean.js

@@ -1 +1 @@
-import{_ as a,c as o,o as s,x as e,a as t}from"./chunks/framework.0799945b.js";const b=JSON.parse('{"title":"Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/utils.md","lastUpdated":1681870292000}'),i={name:"guide/creating-your-project/utils.md"},n=e("h1",{id:"utilities",tabindex:"-1"},[t("Utilities "),e("a",{class:"header-anchor",href:"#utilities","aria-label":'Permalink to "Utilities"'},"​")],-1),r=e("p",null,"There are often concepts that aren't inherent to a single feature, but rather work with joining different features together. For example, a reset clickable that activates a conversion and resets a tree, which happens to be a common use case but isn't inherent to clickables, conversions, or trees.",-1),c=e("p",null,[t("These are perfect situations for utilities, and so to encourage creators to learn to identify and take advantage of these situations, a file called "),e("code",null,"src/data/common.tsx"),t(" has been created to demo some of the more common utility functions a project might use. Adding new utilities to this file is encouraged, as is creating utils in general. It also works as a good stepping stone to creating your own features.")],-1),l=[n,r,c];function d(u,h,p,f,m,_){return s(),o("div",null,l)}const k=a(i,[["render",d]]);export{b as __pageData,k as default};
+import{_ as a,c as o,o as s,x as e,a as t}from"./chunks/framework.0799945b.js";const b=JSON.parse('{"title":"Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"guide/creating-your-project/utils.md","lastUpdated":1681878045000}'),i={name:"guide/creating-your-project/utils.md"},n=e("h1",{id:"utilities",tabindex:"-1"},[t("Utilities "),e("a",{class:"header-anchor",href:"#utilities","aria-label":'Permalink to "Utilities"'},"​")],-1),r=e("p",null,"There are often concepts that aren't inherent to a single feature, but rather work with joining different features together. For example, a reset clickable that activates a conversion and resets a tree, which happens to be a common use case but isn't inherent to clickables, conversions, or trees.",-1),c=e("p",null,[t("These are perfect situations for utilities, and so to encourage creators to learn to identify and take advantage of these situations, a file called "),e("code",null,"src/data/common.tsx"),t(" has been created to demo some of the more common utility functions a project might use. Adding new utilities to this file is encouraged, as is creating utils in general. It also works as a good stepping stone to creating your own features.")],-1),l=[n,r,c];function d(u,h,p,f,m,_){return s(),o("div",null,l)}const k=a(i,[["render",d]]);export{b as __pageData,k as default};

assets/guide_getting-started_examples.md.fb789ba9.js

@@ -1 +1 @@
-import{_ as o,c as n,x as e,a as t,C as a,o as s,D as i}from"./chunks/framework.0799945b.js";const D=JSON.parse('{"title":"Example Projects","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/examples.md","lastUpdated":1681870292000}'),l={name:"guide/getting-started/examples.md"},c=e("h1",{id:"example-projects",tabindex:"-1"},[t("Example Projects "),e("a",{class:"header-anchor",href:"#example-projects","aria-label":'Permalink to "Example Projects"'},"​")],-1),d={id:"advent-incremental",tabindex:"-1"},p=e("a",{class:"header-anchor",href:"#advent-incremental","aria-label":'Permalink to "Advent Incremental <Badge type="warning" text="Profectus 0.5" />"'},"​",-1),h=e("p",null,[e("a",{href:"https://github.com/thepaperpilot/advent-Incremental/",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://www.thepaperpilot.org/advent/",target:"_blank",rel:"noreferrer"},"View Project")],-1),m=e("p",null,[t("An incremental game with 25 different layers of content. A good example of what a large project looks like. There's also a partial port to 0.6 available "),e("a",{href:"https://github.com/thepaperpilot/advent-Incremental/tree/next",target:"_blank",rel:"noreferrer"},"here"),t(".")],-1),f={id:"primordia",tabindex:"-1"},_=e("a",{class:"header-anchor",href:"#primordia","aria-label":'Permalink to "Primordia <Badge type="warning" text="Profectus 0.5" />"'},"​",-1),g=e("p",null,[e("a",{href:"https://github.com/Jacorb90/Primordial-Tree",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://jacorb90.me/Primordial-Tree/",target:"_blank",rel:"noreferrer"},"View Project")],-1),u=e("p",null,'A "The Prestige Tree" style incremental game, developed by the original creator of TPT.',-1),b={id:"tmt-demo",tabindex:"-1"},x=e("a",{class:"header-anchor",href:"#tmt-demo","aria-label":'Permalink to "TMT-Demo <Badge type="tip" text="Profectus 0.6" />"'},"​",-1),P=e("p",null,[e("a",{href:"https://github.com/profectus-engine/tmt-demo",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://profectus-engine.github.io/TMT-Demo/",target:"_blank",rel:"noreferrer"},"View Project")],-1),T=e("p",null,"A project loosely based off the Demo project for TMT. Uses most of the different features of Profectus, but doesn't have any real gameplay.",-1);function k(w,v,j,y,V,B){const r=i("Badge");return s(),n("div",null,[c,e("h2",d,[t("Advent Incremental "),a(r,{type:"warning",text:"Profectus 0.5"}),t(),p]),h,m,e("h2",f,[t("Primordia "),a(r,{type:"warning",text:"Profectus 0.5"}),t(),_]),g,u,e("h2",b,[t("TMT-Demo "),a(r,{type:"tip",text:"Profectus 0.6"}),t(),x]),P,T])}const E=o(l,[["render",k]]);export{D as __pageData,E as default};
+import{_ as o,c as n,x as e,a as t,C as a,o as s,D as i}from"./chunks/framework.0799945b.js";const D=JSON.parse('{"title":"Example Projects","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/examples.md","lastUpdated":1681878045000}'),l={name:"guide/getting-started/examples.md"},c=e("h1",{id:"example-projects",tabindex:"-1"},[t("Example Projects "),e("a",{class:"header-anchor",href:"#example-projects","aria-label":'Permalink to "Example Projects"'},"​")],-1),d={id:"advent-incremental",tabindex:"-1"},p=e("a",{class:"header-anchor",href:"#advent-incremental","aria-label":'Permalink to "Advent Incremental <Badge type="warning" text="Profectus 0.5" />"'},"​",-1),h=e("p",null,[e("a",{href:"https://github.com/thepaperpilot/advent-Incremental/",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://www.thepaperpilot.org/advent/",target:"_blank",rel:"noreferrer"},"View Project")],-1),m=e("p",null,[t("An incremental game with 25 different layers of content. A good example of what a large project looks like. There's also a partial port to 0.6 available "),e("a",{href:"https://github.com/thepaperpilot/advent-Incremental/tree/next",target:"_blank",rel:"noreferrer"},"here"),t(".")],-1),f={id:"primordia",tabindex:"-1"},_=e("a",{class:"header-anchor",href:"#primordia","aria-label":'Permalink to "Primordia <Badge type="warning" text="Profectus 0.5" />"'},"​",-1),g=e("p",null,[e("a",{href:"https://github.com/Jacorb90/Primordial-Tree",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://jacorb90.me/Primordial-Tree/",target:"_blank",rel:"noreferrer"},"View Project")],-1),u=e("p",null,'A "The Prestige Tree" style incremental game, developed by the original creator of TPT.',-1),b={id:"tmt-demo",tabindex:"-1"},x=e("a",{class:"header-anchor",href:"#tmt-demo","aria-label":'Permalink to "TMT-Demo <Badge type="tip" text="Profectus 0.6" />"'},"​",-1),P=e("p",null,[e("a",{href:"https://github.com/profectus-engine/tmt-demo",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://profectus-engine.github.io/TMT-Demo/",target:"_blank",rel:"noreferrer"},"View Project")],-1),T=e("p",null,"A project loosely based off the Demo project for TMT. Uses most of the different features of Profectus, but doesn't have any real gameplay.",-1);function k(w,v,j,y,V,B){const r=i("Badge");return s(),n("div",null,[c,e("h2",d,[t("Advent Incremental "),a(r,{type:"warning",text:"Profectus 0.5"}),t(),p]),h,m,e("h2",f,[t("Primordia "),a(r,{type:"warning",text:"Profectus 0.5"}),t(),_]),g,u,e("h2",b,[t("TMT-Demo "),a(r,{type:"tip",text:"Profectus 0.6"}),t(),x]),P,T])}const E=o(l,[["render",k]]);export{D as __pageData,E as default};

assets/guide_getting-started_examples.md.fb789ba9.lean.js

@@ -1 +1 @@
-import{_ as o,c as n,x as e,a as t,C as a,o as s,D as i}from"./chunks/framework.0799945b.js";const D=JSON.parse('{"title":"Example Projects","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/examples.md","lastUpdated":1681870292000}'),l={name:"guide/getting-started/examples.md"},c=e("h1",{id:"example-projects",tabindex:"-1"},[t("Example Projects "),e("a",{class:"header-anchor",href:"#example-projects","aria-label":'Permalink to "Example Projects"'},"​")],-1),d={id:"advent-incremental",tabindex:"-1"},p=e("a",{class:"header-anchor",href:"#advent-incremental","aria-label":'Permalink to "Advent Incremental <Badge type="warning" text="Profectus 0.5" />"'},"​",-1),h=e("p",null,[e("a",{href:"https://github.com/thepaperpilot/advent-Incremental/",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://www.thepaperpilot.org/advent/",target:"_blank",rel:"noreferrer"},"View Project")],-1),m=e("p",null,[t("An incremental game with 25 different layers of content. A good example of what a large project looks like. There's also a partial port to 0.6 available "),e("a",{href:"https://github.com/thepaperpilot/advent-Incremental/tree/next",target:"_blank",rel:"noreferrer"},"here"),t(".")],-1),f={id:"primordia",tabindex:"-1"},_=e("a",{class:"header-anchor",href:"#primordia","aria-label":'Permalink to "Primordia <Badge type="warning" text="Profectus 0.5" />"'},"​",-1),g=e("p",null,[e("a",{href:"https://github.com/Jacorb90/Primordial-Tree",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://jacorb90.me/Primordial-Tree/",target:"_blank",rel:"noreferrer"},"View Project")],-1),u=e("p",null,'A "The Prestige Tree" style incremental game, developed by the original creator of TPT.',-1),b={id:"tmt-demo",tabindex:"-1"},x=e("a",{class:"header-anchor",href:"#tmt-demo","aria-label":'Permalink to "TMT-Demo <Badge type="tip" text="Profectus 0.6" />"'},"​",-1),P=e("p",null,[e("a",{href:"https://github.com/profectus-engine/tmt-demo",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://profectus-engine.github.io/TMT-Demo/",target:"_blank",rel:"noreferrer"},"View Project")],-1),T=e("p",null,"A project loosely based off the Demo project for TMT. Uses most of the different features of Profectus, but doesn't have any real gameplay.",-1);function k(w,v,j,y,V,B){const r=i("Badge");return s(),n("div",null,[c,e("h2",d,[t("Advent Incremental "),a(r,{type:"warning",text:"Profectus 0.5"}),t(),p]),h,m,e("h2",f,[t("Primordia "),a(r,{type:"warning",text:"Profectus 0.5"}),t(),_]),g,u,e("h2",b,[t("TMT-Demo "),a(r,{type:"tip",text:"Profectus 0.6"}),t(),x]),P,T])}const E=o(l,[["render",k]]);export{D as __pageData,E as default};
+import{_ as o,c as n,x as e,a as t,C as a,o as s,D as i}from"./chunks/framework.0799945b.js";const D=JSON.parse('{"title":"Example Projects","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/examples.md","lastUpdated":1681878045000}'),l={name:"guide/getting-started/examples.md"},c=e("h1",{id:"example-projects",tabindex:"-1"},[t("Example Projects "),e("a",{class:"header-anchor",href:"#example-projects","aria-label":'Permalink to "Example Projects"'},"​")],-1),d={id:"advent-incremental",tabindex:"-1"},p=e("a",{class:"header-anchor",href:"#advent-incremental","aria-label":'Permalink to "Advent Incremental <Badge type="warning" text="Profectus 0.5" />"'},"​",-1),h=e("p",null,[e("a",{href:"https://github.com/thepaperpilot/advent-Incremental/",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://www.thepaperpilot.org/advent/",target:"_blank",rel:"noreferrer"},"View Project")],-1),m=e("p",null,[t("An incremental game with 25 different layers of content. A good example of what a large project looks like. There's also a partial port to 0.6 available "),e("a",{href:"https://github.com/thepaperpilot/advent-Incremental/tree/next",target:"_blank",rel:"noreferrer"},"here"),t(".")],-1),f={id:"primordia",tabindex:"-1"},_=e("a",{class:"header-anchor",href:"#primordia","aria-label":'Permalink to "Primordia <Badge type="warning" text="Profectus 0.5" />"'},"​",-1),g=e("p",null,[e("a",{href:"https://github.com/Jacorb90/Primordial-Tree",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://jacorb90.me/Primordial-Tree/",target:"_blank",rel:"noreferrer"},"View Project")],-1),u=e("p",null,'A "The Prestige Tree" style incremental game, developed by the original creator of TPT.',-1),b={id:"tmt-demo",tabindex:"-1"},x=e("a",{class:"header-anchor",href:"#tmt-demo","aria-label":'Permalink to "TMT-Demo <Badge type="tip" text="Profectus 0.6" />"'},"​",-1),P=e("p",null,[e("a",{href:"https://github.com/profectus-engine/tmt-demo",target:"_blank",rel:"noreferrer"},"View Source"),t(" | "),e("a",{href:"https://profectus-engine.github.io/TMT-Demo/",target:"_blank",rel:"noreferrer"},"View Project")],-1),T=e("p",null,"A project loosely based off the Demo project for TMT. Uses most of the different features of Profectus, but doesn't have any real gameplay.",-1);function k(w,v,j,y,V,B){const r=i("Badge");return s(),n("div",null,[c,e("h2",d,[t("Advent Incremental "),a(r,{type:"warning",text:"Profectus 0.5"}),t(),p]),h,m,e("h2",f,[t("Primordia "),a(r,{type:"warning",text:"Profectus 0.5"}),t(),_]),g,u,e("h2",b,[t("TMT-Demo "),a(r,{type:"tip",text:"Profectus 0.6"}),t(),x]),P,T])}const E=o(l,[["render",k]]);export{D as __pageData,E as default};

assets/guide_getting-started_first-layer.md.59823253.js

@@ -0,0 +1,42 @@
+import{_ as s,c as a,o as n,N as e}from"./chunks/framework.0799945b.js";const d=JSON.parse('{"title":"Your First Layer","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/first-layer.md","lastUpdated":1681878045000}'),o={name:"guide/getting-started/first-layer.md"},l=e(`<h1 id="your-first-layer" tabindex="-1">Your First Layer <a class="header-anchor" href="#your-first-layer" aria-label="Permalink to &quot;Your First Layer&quot;">​</a></h1><p>This page is a guide on where to start with creating your very first layer. It is intended for developers who are first learning to use the engine.</p><h2 id="creating-the-layer" tabindex="-1">Creating the layer <a class="header-anchor" href="#creating-the-layer" aria-label="Permalink to &quot;Creating the layer&quot;">​</a></h2><div class="info custom-block"><p class="custom-block-title">INFO</p><p>The template comes with a layer in <code>projEntry.tsx</code> and another in <code>prestige.tsx</code>. You can use those as a base instead of creating a new one from scratch.</p></div><p>To add a new layer, first create it via the <a href="./../../api/modules/game/layers#createlayer">createLayer</a> function. You typically create a single layer per file, the first being in <code>projEntry</code>. After it is created, you&#39;ll need to add it to the returned array in <a href="./../../api/modules/data/projEntry#getinitiallayers">getInitialLayers</a>.</p><p>The <code>createLayer</code> function will need a unique ID for your layer and a function that constructs the layer. At a minimum, it needs a <code>display</code> property so Profectus knows what to render. It will look something 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;"> id </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> layer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createLayer</span><span style="color:#A6ACCD;">(id</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;font-style:italic;">this</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">BaseLayer</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:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">jsx</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> &lt;&gt;</span><span style="color:#A6ACCD;">My</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">&lt;/&gt;</span><span style="color:#F07178;">)</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><h2 id="adding-a-resource" tabindex="-1">Adding a resource <a class="header-anchor" href="#adding-a-resource" aria-label="Permalink to &quot;Adding a resource&quot;">​</a></h2><p>Game elements in Profectus are called &quot;features&quot;. You&#39;ll create them inside the layer&#39;s constructor function and return them in the object at the end. Many features can also be rendered in the layer&#39;s display.</p><p>In the file tree, there&#39;s a folder called <code>src/features</code>, which contains all the different features that are included in Profectus (and any others you&#39;ve created or downloaded from others!). You can browse the folder to see all the features and learn what each one does. Some features also have dedicated guide pages on how to use them.</p><p>Let&#39;s add one of these features to our layer: a Resource. As with most features, there&#39;s a <a href="./../../api/modules/features/resource#createresource">createResource</a> constructor for creating this feature. These constructors typically take a function that returns an object with all the options for that feature. However, resources are simple features, so they just take the options as parameters. Creating a resource will look 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;"> points </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createResource</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">DecimalSource</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prestige points</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>In your IDE you&#39;ll be able to see the documentation for each parameter - in this case, the first one is the default value for this resource, and the second is the display name for the resource. Now we can make sure to add the points to our layer&#39;s object and display it using the <a href="./../../api/modules/features/resource#maindisplay-component">MainDisplay</a> Vue component. All in all, our layer should look like this now:</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;"> id </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> layer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createLayer</span><span style="color:#A6ACCD;">(id</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;font-style:italic;">this</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">BaseLayer</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:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">points</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">createResource</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">DecimalSource</span><span style="color:#89DDFF;">&gt;</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prestige points</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#F07178;">        display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">jsx</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> (</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">&lt;&gt;</span></span>
+<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">MainDisplay</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">resource</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">/&gt;</span></span>
+<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">&lt;/&gt;</span></span>
+<span class="line"><span style="color:#F07178;">        ))</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><h2 id="update-loop" tabindex="-1">Update loop <a class="header-anchor" href="#update-loop" aria-label="Permalink to &quot;Update loop&quot;">​</a></h2><p>Some things happen every tick, such as passive resource generation. You can hook into the update loop using an event bus. There&#39;s a global one and one for each layer. For example, within the layer function, you can add this code to our example to increase our points at a rate of 1 per second:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight has-diff"><code><span class="line"><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">update</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">diff</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:#F07178;">	</span><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Decimal</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">diff</span><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>Note that within the <code>createLayer</code>&#39;s function, <code>this</code> refers to the layer you&#39;re actively creating, and the <code>diff</code> parameter represents the seconds that have passed since the last update - which will typically be around 0.05 unless throttling is disabled in the settings. If we wanted to generate an amount other than 1/s, we could multiply diff by the per-second rate.</p><h2 id="adding-an-upgrade" tabindex="-1">Adding an upgrade <a class="header-anchor" href="#adding-an-upgrade" aria-label="Permalink to &quot;Adding an upgrade&quot;">​</a></h2><p>Let&#39;s add a more complex feature to the layer now - an upgrade. Upgrades represent one-time purchases. This time the <a href="./../../api/modules/features/upgrade#createupgrade">createUpgrade</a> function requires an options function. We can create a lambda that returns the options object. We&#39;ll need to give it a cost requirement and display. Afterwards, it should look 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;"> myUpgrade </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createUpgrade</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;">createCostRequirement</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;">resource</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:#F07178;">cost</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</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:#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:#F07178;">description</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Double points generation</span><span style="color:#89DDFF;">&quot;</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</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>We&#39;ll add this upgrade to our returned object and our display. Upgrades are a renderable feature, which means we can use the <a href="./../../api/modules/util/vue#render">render</a> function to display them. The returned layer object will now look 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:#89DDFF;font-style:italic;">return</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
+<span class="line"><span style="color:#A6ACCD;">	points</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">	myUpgrade</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:#82AAFF;">jsx</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>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">MainDisplay resource</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">/&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;font-style:italic;">render</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">myUpgrade</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">}</span></span>
+<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/&gt;</span></span>
+<span class="line"><span style="color:#A6ACCD;">    ))</span></span>
+<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>The last thing to do to implement our upgrade is to give it an effect! If <code>myUpgrade.bought.value</code> is true, then the points generation should double. We&#39;ll represent that by creating a points gain modifier, which will make it easy to handle many things affecting points gain. The modifier should look 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;"> myModifier </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createSequentialModifier</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>
+<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#82AAFF;">createMultiplicativeModifier</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;">multiplier</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
+<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#F07178;">enabled</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> myUpgrade</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">bought</span></span>
+<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span></span>
+<span class="line"><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>Now to make the points gain use the modifier, we&#39;ll update the line that adds points to this:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight has-diff"><code><span class="line"><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> Decimal</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#A6ACCD;">(points</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> Decimal</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">times</span><span style="color:#A6ACCD;">(myModifier</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">apply</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> diff))</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>You now have a functioning upgrade, and are prepared to create many more upgrades and other features!</p><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to &quot;Next Steps&quot;">​</a></h2><p>Since Profectus is an engine, what to do with it is a fairly open-ended question. If you&#39;re not quite ready to go out on your own, there are more guides to help prepare you. A good next step would be the <a href="./../recipes/prestige">Prestige Mechanic</a> recipe page.</p><p>The &quot;Important Concepts&quot; section of the guide goes further into various parts of the engine that are prudent to understand. If any of those look interesting or like something you need help with, they can be a great help.</p><p>Beyond that, the best way to learn is to just continue using the engine and exploring its various features. Have fun!</p>`,32),p=[l];function t(r,c,i,y,D,F){return n(),a("div",null,p)}const C=s(o,[["render",t]]);export{d as __pageData,C as default};

assets/guide_getting-started_first-layer.md.59823253.lean.js

@@ -0,0 +1 @@
+import{_ as s,c as a,o as n,N as e}from"./chunks/framework.0799945b.js";const d=JSON.parse('{"title":"Your First Layer","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/first-layer.md","lastUpdated":1681878045000}'),o={name:"guide/getting-started/first-layer.md"},l=e("",32),p=[l];function t(r,c,i,y,D,F){return n(),a("div",null,p)}const C=s(o,[["render",t]]);export{d as __pageData,C as default};

assets/guide_getting-started_setup.md.43cc29ed.lean.js

@@ -1 +1 @@
-import{_ as e,c as t,o,N as a}from"./chunks/framework.0799945b.js";const r="/assets/workflow-perms.afbb596c.png",i="/assets/actionsbutton.f1ba9d8e.png",n="/assets/gh-pages.a24cefcf.png",y=JSON.parse('{"title":"Setting Up","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/setup.md","lastUpdated":1681870292000}'),s={name:"guide/getting-started/setup.md"},l=a("",30),p=[l];function c(u,d,h,m,g,f){return o(),t("div",null,p)}const v=e(s,[["render",c]]);export{y as __pageData,v as default};
+import{_ as e,c as t,o,N as a}from"./chunks/framework.0799945b.js";const r="/assets/workflow-perms.afbb596c.png",i="/assets/actionsbutton.f1ba9d8e.png",n="/assets/gh-pages.a24cefcf.png",y=JSON.parse('{"title":"Setting Up","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/setup.md","lastUpdated":1681878045000}'),s={name:"guide/getting-started/setup.md"},l=a("",30),p=[l];function c(u,d,h,m,g,f){return o(),t("div",null,p)}const v=e(s,[["render",c]]);export{y as __pageData,v as default};

assets/guide_getting-started_updating.md.0eb1ee3c.js

@@ -1,3 +1,3 @@
-import{_ as e,c as t,o as a,N as o}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Updating Profectus","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/updating.md","lastUpdated":1681870292000}'),s={name:"guide/getting-started/updating.md"},n=o(`<h1 id="updating-profectus" tabindex="-1">Updating Profectus <a class="header-anchor" href="#updating-profectus" aria-label="Permalink to &quot;Updating Profectus&quot;">​</a></h1><h2 id="github" tabindex="-1">Github <a class="header-anchor" href="#github" aria-label="Permalink to &quot;Github&quot;">​</a></h2><p>Due to Profectus being a template repository, your projects do not share a git history with Profectus. To update changes, you will need to run the following:</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">remote</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">template</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">https://github.com/profectus-engine/Profectus</span></span>
+import{_ as e,c as t,o as a,N as o}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Updating Profectus","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/updating.md","lastUpdated":1681878045000}'),s={name:"guide/getting-started/updating.md"},n=o(`<h1 id="updating-profectus" tabindex="-1">Updating Profectus <a class="header-anchor" href="#updating-profectus" aria-label="Permalink to &quot;Updating Profectus&quot;">​</a></h1><h2 id="github" tabindex="-1">Github <a class="header-anchor" href="#github" aria-label="Permalink to &quot;Github&quot;">​</a></h2><p>Due to Profectus being a template repository, your projects do not share a git history with Profectus. To update changes, you will need to run the following:</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">remote</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">template</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">https://github.com/profectus-engine/Profectus</span></span>
 <span class="line"><span style="color:#FFCB6B;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fetch</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">--all</span></span>
 <span class="line"><span style="color:#FFCB6B;">git</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">merge</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">template/main</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">--allow-unrelated-histories</span></span></code></pre></div><p>The first command only has to be performed once. The third command may require you to merge conflicts between code both you and Profectus have changed - however, due to the modularity of Profectus, this should be fairly rare. Unfortunately, due to the unrelated histories the first time you do this <em>every</em> change will be marked as a conflict, and you&#39;ll need to accept each one.</p><h2 id="replit" tabindex="-1">Replit <a class="header-anchor" href="#replit" aria-label="Permalink to &quot;Replit&quot;">​</a></h2><p>The sidebar has a tab labeled &quot;Version Control&quot;, which you can use to merge all changes made to Profectus into your project. Unfortunately, Replit does not have a merge tool so this process may irrecoverably erase changes you&#39;ve made - I&#39;d recommend making a backup first.</p><h2 id="glitch" tabindex="-1">Glitch <a class="header-anchor" href="#glitch" aria-label="Permalink to &quot;Glitch&quot;">​</a></h2><p>Unfortunately, Glitch does not provide any method by which to update a project from a Github repository. If you&#39;ve only changed things in the data folder you may consider creating a new project, importing the current version of Profectus, and then placing your data folder in the new project.</p>`,9),r=[n];function l(i,c,p,d,h,u){return a(),t("div",null,r)}const m=e(s,[["render",l]]);export{g as __pageData,m as default};

assets/guide_getting-started_updating.md.0eb1ee3c.lean.js

@@ -1 +1 @@
-import{_ as e,c as t,o as a,N as o}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Updating Profectus","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/updating.md","lastUpdated":1681870292000}'),s={name:"guide/getting-started/updating.md"},n=o("",9),r=[n];function l(i,c,p,d,h,u){return a(),t("div",null,r)}const m=e(s,[["render",l]]);export{g as __pageData,m as default};
+import{_ as e,c as t,o as a,N as o}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Updating Profectus","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/updating.md","lastUpdated":1681878045000}'),s={name:"guide/getting-started/updating.md"},n=o("",9),r=[n];function l(i,c,p,d,h,u){return a(),t("div",null,r)}const m=e(s,[["render",l]]);export{g as __pageData,m as default};

assets/guide_important-concepts_coercable.md.bb8af927.js

@@ -1,4 +1,4 @@
-import{_ as e,c as a,o as s,N as n}from"./chunks/framework.0799945b.js";const h=JSON.parse('{"title":"Coercable Components","description":"","frontmatter":{},"headers":[],"relativePath":"guide/important-concepts/coercable.md","lastUpdated":1681870292000}'),o={name:"guide/important-concepts/coercable.md"},t=n(`<h1 id="coercable-components" tabindex="-1">Coercable Components <a class="header-anchor" href="#coercable-components" aria-label="Permalink to &quot;Coercable Components&quot;">​</a></h1><p>Most times a feature has some sort of dynamic display, it&#39;ll allow you to pass a &quot;Coercable Component&quot;, or rather, something that can be coerced into a Vue component. This page goes over the different types of values you can use</p><h2 id="template-strings" tabindex="-1">Template Strings <a class="header-anchor" href="#template-strings" aria-label="Permalink to &quot;Template Strings&quot;">​</a></h2><p>If you provide a string, it will be wrapped in a component using it as the template. This is the simplest method, although not suitable for complex displays, and realistically cannot use Vue components as none are registered globally (by default). Recommended for static or simple dynamic displays, such as displays on features.</p><p>Template strings need to be wrapped in some HTML element. By default, they&#39;ll be wrapped in a <code>&lt;span&gt;</code> element, although certain features may wrap things in div or header elements instead, as appropriate.</p><h2 id="render-functions-jsx" tabindex="-1">Render Functions (JSX) <a class="header-anchor" href="#render-functions-jsx" aria-label="Permalink to &quot;Render Functions (JSX)&quot;">​</a></h2><p>You can provide a render function and it will be wrapped in a component as well. The intended use for this is to write JSX inside a function, which will get automatically converted into a render function. You can read more about that process on the Vue docs on <a href="https://vuejs.org/guide/extras/render-function.html#render-functions-jsx" target="_blank" rel="noreferrer">Render Functions &amp; JSX</a>. Note that JSX must be returned in a function - it does not work &quot;standalone&quot;. The CoercableComponent type will enforce this for you.</p><p>JSX can use imported components, making this suited for writing the display properties on things like Tabs or Layers. There are also built-in functions to <code>render</code> features (either as their own or in a layout via <code>renderRow</code> and <code>renderCol</code>), so you don&#39;t need to import the Vue component for every feature you plan on using.</p><p>Typically a feature will accept a <code>Computable&lt;CoercableComponent&gt;</code>, which means functions would (normally) be wrapped in a computed (see <a href="./reactivity#computable">Computable</a> for more details). This would break render functions, so when passing a render function as a CoercableComponent it must be specially marked that it shouldn&#39;t be cached. You can use the built-in <code>jsx</code> function to mark a function for you.</p><h4 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h4><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:#89DDFF;">{</span></span>
+import{_ as e,c as a,o as s,N as n}from"./chunks/framework.0799945b.js";const h=JSON.parse('{"title":"Coercable Components","description":"","frontmatter":{},"headers":[],"relativePath":"guide/important-concepts/coercable.md","lastUpdated":1681878045000}'),o={name:"guide/important-concepts/coercable.md"},t=n(`<h1 id="coercable-components" tabindex="-1">Coercable Components <a class="header-anchor" href="#coercable-components" aria-label="Permalink to &quot;Coercable Components&quot;">​</a></h1><p>Most times a feature has some sort of dynamic display, it&#39;ll allow you to pass a &quot;Coercable Component&quot;, or rather, something that can be coerced into a Vue component. This page goes over the different types of values you can use</p><h2 id="template-strings" tabindex="-1">Template Strings <a class="header-anchor" href="#template-strings" aria-label="Permalink to &quot;Template Strings&quot;">​</a></h2><p>If you provide a string, it will be wrapped in a component using it as the template. This is the simplest method, although not suitable for complex displays, and realistically cannot use Vue components as none are registered globally (by default). Recommended for static or simple dynamic displays, such as displays on features.</p><p>Template strings need to be wrapped in some HTML element. By default, they&#39;ll be wrapped in a <code>&lt;span&gt;</code> element, although certain features may wrap things in div or header elements instead, as appropriate.</p><h2 id="render-functions-jsx" tabindex="-1">Render Functions (JSX) <a class="header-anchor" href="#render-functions-jsx" aria-label="Permalink to &quot;Render Functions (JSX)&quot;">​</a></h2><p>You can provide a render function and it will be wrapped in a component as well. The intended use for this is to write JSX inside a function, which will get automatically converted into a render function. You can read more about that process on the Vue docs on <a href="https://vuejs.org/guide/extras/render-function.html#render-functions-jsx" target="_blank" rel="noreferrer">Render Functions &amp; JSX</a>. Note that JSX must be returned in a function - it does not work &quot;standalone&quot;. The CoercableComponent type will enforce this for you.</p><p>JSX can use imported components, making this suited for writing the display properties on things like Tabs or Layers. There are also built-in functions to <code>render</code> features (either as their own or in a layout via <code>renderRow</code> and <code>renderCol</code>), so you don&#39;t need to import the Vue component for every feature you plan on using.</p><p>Typically a feature will accept a <code>Computable&lt;CoercableComponent&gt;</code>, which means functions would (normally) be wrapped in a computed (see <a href="./reactivity#computable">Computable</a> for more details). This would break render functions, so when passing a render function as a CoercableComponent it must be specially marked that it shouldn&#39;t be cached. You can use the built-in <code>jsx</code> function to mark a function for you.</p><h4 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-label="Permalink to &quot;Example&quot;">​</a></h4><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:#89DDFF;">{</span></span>
 <span class="line"><span style="color:#F07178;">	</span><span style="color:#FFCB6B;">display</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">jsx</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> (</span></span>
 <span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">&lt;&gt;</span></span>
 <span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">MainDisplay</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">resource</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">points</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">color</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">color</span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">/&gt;</span></span>