31 lines
20 KiB
JavaScript
31 lines
20 KiB
JavaScript
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":1681792472000}'),o={name:"guide/advanced-concepts/creating-features.md"},t=n(`<h1 id="creating-features" tabindex="-1">Creating Features <a class="header-anchor" href="#creating-features" aria-label="Permalink to "Creating Features""></a></h1><p>Profectus is designed to encourage the developer to eventually start designing their own features for use in specific games. Features are designed to work where they require minimal (and typically zero) modifications around the code base - you simply write a single file for the feature, and any vue components it needs, and the act of importing that feature will set everything up. This also means you can share these features with others in entire collections, and any they don't use won't be present in the build output, won't be loaded, and won't affect the project in any way.</p><h2 id="creating-the-feature" tabindex="-1">Creating the Feature <a class="header-anchor" href="#creating-the-feature" aria-label="Permalink to "Creating the Feature""></a></h2><p>Every feature has a couple of types. They have the feature themselves, a generic version for convenience, and any constructor typically has an options type and a type that gets "added" to it to create the feature itself. These typically involve replacing some types to denote how various properties change from, for example, <code>Computable<X></code> to <code>ProcessedComputable<X></code>. You should be able to use any of the existing features as a reference for how these types look and work.</p><p>Most significantly, the base type should typically always have a <code>type</code> property pointing to a symbol unique to this feature, so they can be easily differentiated at runtime. If it's a feature that should be renderable, then it'll also need <code>[Component]</code> and <code>[GatherProps]</code> properties, which describe the vue component to use and how to get the props for it from this feature, as well as a unique ID for the feature's <a href="./nodes">node</a>. You cna use the <a href="/api/modules/features/feature#getuniqueid">getUniqueID</a> utility to help.</p><p>The constructor itself should do several things. They should take their options within a function, so that they're not resolved when the object is constructed. It should return a lazy proxy of the feature, which allows features to reference each other and only resolve themselves once every feature is defined. The constructor should create any persistent refs it may require outside of the lazy proxy - it won't have access to the options at this point, so it should make any it <em>potentially</em> may require. Any that turn out not being needed can be <a href="/api/modules/game/persistence#deletepersistent">deleted</a>. Inside the lazy proxy the constructor should create the options object, assign onto it every property from the base type, call <a href="/api/modules/util/computed#processcomputable">processComputable</a> on every computable type, and <a href="/api/modules/features/feature#setdefault">setDefault</a> on any property with a default value. Then you should be able to simply return the options object, likely with a type cast, and the constructor will be complete.</p><p>Because typescript does not emit JS, if a property is supposed to be a function it is impossible to differentiate between a function that is itself the intended value or a function that returns the actual value. For this reason it is not recommended for any feature types to include properties that are <code>Computable<Function></code>s, and all functions <em>will</em> be wrapped in <code>computed</code>. The notable exception to this is <a href="./../important-concepts/coercable#render-functions-jsx">JSX</a>, which uses a utility function to mark that a function should not be wrapped.</p><h2 id="vue-components" tabindex="-1">Vue Components <a class="header-anchor" href="#vue-components" aria-label="Permalink to "Vue Components""></a></h2><p>Any vue components you write need to do a couple things. Typically they'll need to type any props that come from computed properties appropriately, for which you can use the <a href="/api/modules/util/vue#processedproptype">processedPropType</a> utility - using it will look something like <code>style: processedPropType<StyleValue>(String, Object, Array)</code>. You'll also want to make sure to <code>unref</code> any of these props you use in the template. The template should make sure to include a <code>Node</code> component with the feature's ID. Also, if there are custom displays this feature may have, you'll want to convert the <code>CoercableComponent</code> into a Vue component inside the setup function, typically using the <a href="/api/modules/util/vue#computecomponent">computeComponent</a> or <a href="/api/modules/util/vue#computeoptionalcomponent">computeOptionalComponent</a> utilities.</p><h2 id="custom-settings" tabindex="-1">Custom Settings <a class="header-anchor" href="#custom-settings" aria-label="Permalink to "Custom Settings""></a></h2><p>To add a setting to the options menu specific to this feature, you'll need to do three things, all inside the feature's file. First, extend the settings type with the name of the new setting. For example, here's how the challenge feature adds a setting to hide completed challenges:</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;">declare</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">module</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">game/settings</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;">interface</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Settings</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> hideChallenges</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">boolean</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></code></pre></div><p>Next you must set the default value of this setting when the settings is loaded, which happens during the <code>loadSettings</code> event emitted on the <a href="/api/modules/game/events#globalbus">global bus</a>. This is how that looks like for the same <code>hideChallenges</code> setting from above:</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:#A6ACCD;">globalBus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">loadSettings</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">settings</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setDefault</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">settings</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">hideChallenges</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</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>Finally, you'll need to register a Vue component to the settings menu so the player can actually modify this setting. Here's the example for the <code>hideChallenges</code> setting:</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;">registerSettingField</span><span style="color:#A6ACCD;">(</span></span>
|
||
<span class="line"><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;">=></span><span style="color:#A6ACCD;"> (</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#A6ACCD;font-style:italic;">Toggle</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> title</span><span style="color:#89DDFF;">={</span><span style="color:#F07178;">jsx</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;">=></span><span style="color:#A6ACCD;"> (</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">span</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">option-title</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Hide</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">maxed</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">challenges</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">desc</span><span style="color:#89DDFF;">></span><span style="color:#FFCB6B;">Hide</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">challenges</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">that</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">have</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">been</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">fully</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">completed</span><span style="color:#89DDFF;">.<</span><span style="color:#A6ACCD;">/</span><span style="color:#FFCB6B;">desc</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#A6ACCD;">/</span><span style="color:#FFCB6B;">span</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:#A6ACCD;font-style:italic;">onUpdate</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">modelValue</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (settings</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hideChallenges </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> value)</span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> modelValue</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">settings.hideChallenges</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>
|
||
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="updating-features" tabindex="-1">Updating Features <a class="header-anchor" href="#updating-features" aria-label="Permalink to "Updating Features""></a></h2><p>If your custom feature requires running some sort of update method every tick, you'll want to search layers when they're added for any features of this type (using the <a href="/api/modules/features/feature#findfeatures">findFeatures</a> utility), add an event handler for every <code>update</code>/<code>postUpdate</code>/<code>preUpdate</code>, and clean it up when the layer is removed. Here's how this looks like for the <code>action</code> feature:</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:#C792EA;">const</span><span style="color:#A6ACCD;"> listeners</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Record</span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Unsubscribe</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 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;">globalBus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">addLayer</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">layer</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></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;">actions</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">GenericAction</span><span style="color:#F07178;">[] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">findFeatures</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ActionType</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">GenericAction</span><span style="color:#F07178;">[]</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">listeners</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">postUpdate</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">diff</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">actions</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">action</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</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:#F07178;"> </span><span style="color:#89DDFF;">}</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>
|
||
<span class="line"><span style="color:#A6ACCD;">globalBus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">removeLayer</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">layer</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// unsubscribe from postUpdate</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">listeners</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">?.</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">listeners</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">undefined;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,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};
|