profectus-docs/guide/coercable.html

38 lines
28 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Coercable Components | Profectus</title>
<meta name="description" content="A game engine that grows with you.">
<link rel="stylesheet" href="/assets/style.148fff69.css">
<link rel="modulepreload" href="/assets/app.7cfe4cf0.js">
<link rel="modulepreload" href="/assets/guide_coercable.md.cc5ff21a.lean.js">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<script defer="true" data-domain="moddingtree.com" src="https://plausible.io/js/plausible.js"></script>
<meta name="og:description" content="A game engine that grows with you">
<meta name="og:image" content="/Logo.png">
<meta name="twitter:title" content="Coercable Components | Profectus">
<meta property="og:title" content="Coercable Components | Profectus">
</head>
<body>
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="Profectus, back to home" data-v-675d8756 data-v-cc01ef16><!----> Profectus</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/guide/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/api/" data-v-b8818f8c>API <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://forums.moddingtree.com" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Forums <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://discord.gg/F3xveHV" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Discord <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/profectus-engine/Profectus" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/profectus-engine/profectus-docs" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--]--></header><aside class="sidebar"
display<span class="token operator">:</span> <span class="token function">jsx</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>MainDisplay resource<span class="token operator">=</span><span class="token punctuation">{</span>points<span class="token punctuation">}</span> color<span class="token operator">=</span><span class="token punctuation">{</span>color<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token function">render</span><span class="token punctuation">(</span>resetButton<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">{</span><span class="token function">renderRow</span><span class="token punctuation">(</span>upgrade1<span class="token punctuation">,</span> upgrade2<span class="token punctuation">,</span> upgrade3<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-hidden="true">#</a></h2><p>This one might be the most obvious, but you can also just give it a Vue component to display outright. Keep in mind it will not be passed any props, so it should not depend on any. You can read more about creating Vue components on <a href="https://vuejs.org/guide/essentials/component-basics.html" target="_blank" rel="noopener noreferrer">Components Basics</a>.</p></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-07c132fc><div class="edit" data-v-07c132fc><div class="edit-link" data-v-07c132fc data-v-1ed99556><a class="link" href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/coercable.md" target="_blank" rel="noopener noreferrer" data-v-1ed99556>Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-07c132fc><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/guide/features" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>Features</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/guide/reactivity" data-v-38ede35f><span class="text" data-v-38ede35f>Reactivity</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"api_classes_lib_break_eternity.decimal.md\":\"cab51b1a\",\"api_components_contextcomponent.md\":\"3af2bb40\",\"api_components_infocomponent.md\":\"ab14abad\",\"api_components_layercomponent.md\":\"d6fbd2c4\",\"api_components_marknodecomponent.md\":\"6b2d67a5\",\"api_components_modalcomponent.md\":\"c17e2947\",\"api_components_nodecomponent.md\":\"4ec5c41c\",\"api_components_savecomponent.md\":\"a3af30c9\",\"api_components_fields_dangerbuttoncomponent.md\":\"4780bcb2\",\"api_components_fields_feedbackbuttoncomponent.md\":\"47481f00\",\"api_components_fields_selectcomponent.md\":\"9824cff7\",\"api_components_fields_slidercomponent.md\":\"8f5c7e06\",\"api_components_fields_textcomponent.md\":\"e237b50b\",\"api_components_fields_togglecomponent.md\":\"8b405ff6\",\"api_components_layout_collapsiblecomponent.md\":\"79cb9075\",\"api_components_layout_columncomponent.md\":\"28b8858d\",\"api_components_layout_rowcomponent.md\":\"9031f0d5\",\"api_components_layout_spacercomponent.md\":\"04995b6d\",\"api_components_layout_stickycomponent.md\":\"2719f539\",\"api_components_layout_verticalrulecomponent.md\":\"91d93531\",\"api_components_math_floorcomponent.md\":\"1066dfc4\",\"api_components_math_sqrtcomponent.md\":\"3e9a28b8\",\"api_enums_data_themes.themes.md\":\"89110eae\",\"api_enums_features_boards_board.progressdisplay.md\":\"395d6995\",\"api_enums_features_boards_board.shape.md\":\"b41cefb4\",\"api_enums_features_feature.visibility.md\":\"7ad930a6\",\"api_enums_features_milestones_milestone.milestonedisplay.md\":\"6c3a162f\",\"api_enums_util_common.direction.md\":\"e94c05f1\",\"api_features_achievements_achievementcomponent.md\":\"ea109115\",\"api_features_bars_barcomponent.md\":\"6a511759\",\"api_features_boards_boardcomponent.md\":\"c37decfd\",\"api_features_boards_boardlinkcomponent.md\":\"62983c9b\",\"api_features_boards_boardnodecomponent.md\":\"5fa653e2\",\"api_features_challenges_challengecomponent.md\":\"e8cf476c\",\"api_features_clickables_clickablecomponent.md\":\"034515d9\",\"api_features_grids_gridcellcomponent.md\":\"2d69dd20\",\"api_features_grids_gridcomponent.md\":\"479bd570\",\"api_features_infoboxes_infoboxcomponent.md\":\"71388720\",\"api_features_links_linkcomponent.md\":\"895fb86c\",\"api_features_links_linkscomponent.md\":\"95ce785b\",\"api_features_milestones_milestonecomponent.md\":\"057b078b\",\"api_features_particles_particlescomponent.md\":\"87906de5\",\"api_features_resources_maindisplaycomponent.md\":\"bbf5fd58\",\"api_features_resources_resourcecomponent.md\":\"9b918134\",\"api_features_tabs_tabbuttoncomponent.md\":\"75eeeea0\",\"api_features_tabs_tabcomponent.md\":\"ecc0bc8e\",\"api_features_tabs_tabfamilycomponent.md\":\"c6c0df96\",\"api_features_tooltips_tooltipcomponent.md\":\"4f8a1396\",\"api_features_trees_treecomponent.md\":\"ccc4b72e\",\"api_features_trees_treenodecomponent.md\":\"1e47f0f0\",\"api_features_upgrades_upgradecomponent.md\":\"c62d5b0c\",\"api_index.md\":\"58c99f1b\",\"api_interfaces_data_common.layertreenodeoptions.md\":\"0fd93004\",\"api_interfaces_data_common.resetbuttonoptions.md\":\"c63d64bb\",\"api_interfaces_data_themes.theme.md\":\"a1019f49\",\"api_interfaces_data_themes.themevars.md\":\"358478c4\",\"api_interfaces_features_achievements_achievement.achievementoptions.md\":\"c259d795\",\"api_interfaces_features_achievements_achievement.baseachievement.md\":\"a8d446d4\",\"api_interfaces_features_bars_bar.baroptions.md\":\"66b0a40b\",\"api_interfaces_features_bars_bar.basebar.md\":\"3e9c9ba1\",\"api_interfaces_features_boards_board.baseboard.md\":\"6122a40d\",\"api_interfaces_features_boards_board.baseboardnodeaction.md\":\"e27e7bd1\",\"api_interfaces_features_boards_board.basenodetype.md\":\"fa4968e6\",\"api_interfaces_features_boards_board.boardnode.md\":\"4550f48c\",\"api_interfaces_features_boards_board.boardnodeactionoptions.md\":\"d9ddb5b1\",\"api_interfaces_features_boards_board.boardnodelink.md\":\"d89fa000\",\"api_interfaces_features_boards_board.boardoptions.md\":\"c02da3c5\",\"api_interfaces_features_boards_board.node
<script type="module" async src="/assets/app.7cfe4cf0.js"></script>
</body>
</html>