pages/public/lit/docs/trees-and-tree-customization.html

55 lines
40 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Trees and tree customization | The Paper Pilot</title>
<meta name="description" content="The Paper Pilot's Digital Garden">
<meta name="generator" content="VitePress v1.2.2">
<link rel="preload stylesheet" href="/assets/style.DCqUmn4-.css" as="style">
<script type="module" src="/assets/app.hHU57B7Z.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.DvHfxfnp.js">
<link rel="modulepreload" href="/assets/chunks/theme.fWaFsojX.js">
<link rel="modulepreload" href="/assets/public_lit_docs_trees-and-tree-customization.md.C8iASWgy.lean.js">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Itim&amp;family=Roboto+Mono:ital,wght@0,400;0,600;1,400&amp;display=block">
<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">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3a0839">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#00FFFF">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#3B4252">
<link rel="alternate" type="text/mf2+html" href="/changelog">
<link rel="alternate" type="application/rss+xml" title="Changelog" href="/changelog/rss">
<link rel="alternate" type="application/atom+xml" title="Changelog" href="/changelog/atom">
<link rel="alternate" type="application/json+xml" title="Changelog" href="/changelog/json">
<link rel="me" href="mailto:thepaperpilot@incremental.social">
<link rel="me" href="https://incremental.social/u/thepaperpilot">
<link rel="me" href="https://matrix.to/#/@thepaperpilot:incremental.social">
<link rel="me" href="https://code.incremental.social/thepaperpilot">
<link rel="me" href="https://www.linkedin.com/in/anthony-lawn/">
<link rel="me" href="https://mastodon.gamedev.place/@thepaperpilot">
<link rel="me" href="https://beehaw.org/u/thepaperpilot">
<link rel="me" href="https://www.reddit.com/user/ThePaperPilot/">
<link rel="me" href="https://github.com/thepaperpilot">
<link rel="me" href="https://twitter.com/ThePaperPilot">
<script data-goatcounter="https://thepaperpilot.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
<meta name="og:title" content="Trees and tree customization">
<meta name="og:description" content="">
<meta name="og:image" content="https://www.thepaperpilot.org/paperpilot_thumb.png">
<meta name="og:site_name" content="The Paper Pilot's Digital Garden">
</head>
<body>
<div id="app"><div class="Layout" data-v-82b80952 data-v-5d98c3a5><!--[--><!--[--><!--]--><!----><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle has-sidebar" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>The Paper Pilot</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://moddingtree.com" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Profectus</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://incremental.social" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Incremental Social</span><!--]--></a><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ccf7ddec data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://code.incremental.social/thepaperpilot" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Forgejo</title><path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"/></svg></a><a class="VPSocialLink no-icon" href="https://matrix.to/#/@thepaperpilot:incremental.social" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;left&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blank&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;right&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blank&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;a&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;b&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blank&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;c&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;weirdButton&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]]</span></span></code></pre></div><h2 id="nodes" tabindex="-1">Nodes <a class="header-anchor" href="#nodes" aria-label="Permalink to &quot;Nodes&quot;"></a></h2><p>Nodes are non-layer buttons that can go in trees. They are defined similarly to layers, but with addNode instead of addLayer.</p><p>Features:</p><ul><li><p>color: <strong>optional</strong>, The node&#39;s color. (A string in hex format with a #)</p></li><li><p>symbol: <strong>optional</strong> The text on the button (The id capitalized by default)</p></li><li><p>canClick(): Returns true if the player can click the node. ()</p></li><li><p>onClick(): The function called when the node is clicked.</p></li><li><p>layerShown(): <strong>optional</strong>, A function returning a bool which determines if this node should be visible. It can also return &quot;ghost&quot;, which will hide the layer, but its node will still take up space in its tree.</p></li><li><p>branches: <strong>optional</strong>. An array of layer/node ids. On a tree, a line will appear from this node to all of the nodes in the list. Alternatively, an entry in the array can be a 2-element array consisting of the id and a color value. The color value can either be a string with a hex color code, or a number from 1-3 (theme-affected colors).</p></li><li><p>nodeStyle: <strong>optional</strong>. A CSS object, where the keys are CSS attributes, which styles this node on the tree.</p></li><li><p>tooltip() / tooltipLocked(): <strong>optional</strong>. Functions that return text, which is the tooltip for the node when the layer is unlocked or locked, respectively. By default the tooltips behave the same as in the original Prestige Tree.</p></li><li><p>row: <strong>optional</strong>, the row that this node appears in (for the default tree).</p></li><li><p>position: <strong>optional</strong>, Determines the horizontal position of the layer in its row in a default tree. By default, it uses the id, and layers/nodes are sorted in alphabetical order.</p></li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-d4a0bba5><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-d4a0bba5><span class="visually-hidden" id="doc-footer-aria-label" data-v-d4a0bba5>Pager</span><div class="pager" data-v-d4a0bba5><!----></div><div class="pager" data-v-d4a0bba5><a class="VPLink link pager-link next" href="/garden/anarchism" data-v-d4a0bba5><!--[--><span class="desc" data-v-d4a0bba5>Next page</span><span class="title" data-v-d4a0bba5>Anarchism</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><footer class="vp-doc" data-v-82b80952><div data-v-82b80952>CC 2024 <a class="h-card" rel="me" href="/about" data-v-82b80952><img src="/me.jpg" alt="" data-v-82b80952>The Paper Pilot</a>. <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" data-v-82b80952>CC BY-NC-SA 4.0</a>.</div><div data-v-82b80952>Any and all opinions listed here are my own and not representative of my employers; future, past and present.</div><div data-v-82b80952><a href="https://resume.incremental.social/thepaperpilot/thepaperpilot" data-v-82b80952>Resume</a> (not actively seeking new opportunities).</div><div data-v-8
<script>window.__VP_HASH_MAP__=JSON.parse("{\"about_index.md\":\"DNEsxkhw\",\"garden_digital-gardens_index.md\":\"ye7rN-4y\",\"garden_commune_index.md\":\"DSUnilqG\",\"garden_direct-democracy_index.md\":\"DTREMFCG\",\"garden_federated-identity_index.md\":\"DwtOttQ3\",\"garden_consensus-democracy_index.md\":\"C8lkfycK\",\"garden_cinny_index.md\":\"CiQUotMu\",\"garden_fediverse_index.md\":\"BuEqUtTv\",\"garden_decentralized_index.md\":\"K5mPhW5C\",\"garden_freeform-vs-chronological-dichotomy_index.md\":\"DTl6FHYn\",\"garden_davey-wreden_index.md\":\"BddJZ5s9\",\"garden_anarchism_index.md\":\"CvuRo2_4\",\"garden_abolitionism_index.md\":\"HjImmOqX\",\"garden_dice-armor_index.md\":\"2IOeOiYr\",\"garden_fedi-v2_index.md\":\"7IZyLMfv\",\"garden_atproto_index.md\":\"BCtowTOK\",\"garden_activitypub_index.md\":\"Q0CEUTdo\",\"garden_command-palettes_index.md\":\"DPmU3boD\",\"changelog_index.md\":\"BDr1CQ2v\",\"garden_the-indieweb_signature-blocks_index.md\":\"BLQ0sgSl\",\"garden_this-knowledge-hub_index.md\":\"Bnn_8wyP\",\"garden_the-small-web_index.md\":\"C7jfttLJ\",\"garden_wanderstop_index.md\":\"p-xO-HcW\",\"garden_v-ecs_index.md\":\"D_X8I8_P\",\"garden_vitepress_index.md\":\"B73LoyEy\",\"guide-to-incrementals_index.md\":\"B6vgwrS-\",\"guide-to-incrementals_design_criticism_index.md\":\"BoCBaeHs\",\"public_gamedevtree_2.0-format-changes.md\":\"DRd3bhvM\",\"guide-to-incrementals_ludology_appeal-developers_index.md\":\"CKWXVsKu\",\"guide-to-incrementals_ludology_content_index.md\":\"DeMHSqgv\",\"garden_social-media_index.md\":\"CwL0KJWH\",\"garden_synapse_index.md\":\"BHB2NDZF\",\"guide-to-incrementals_ludology_definition_index.md\":\"6kz6kK9h\",\"garden_the-indieweb_amplification_index.md\":\"D8ZbNckW\",\"guide-to-incrementals_ludology_appeal-gamers_index.md\":\"DfPz3vJ2\",\"public_gamedevtree_readme.md\":\"DVS2_5Qr\",\"garden_the-beginner-s-guide_index.md\":\"CNCAZIou\",\"now_index.md\":\"DL4fCsp0\",\"public_gamedevtree_docs_basic-layer-breakdown.md\":\"Ykqytlzk\",\"public_gamedevtree_docs_buyables.md\":\"C7aL_4eK\",\"public_gamedevtree_docs_clickables.md\":\"CwLsimiU\",\"public_gamedevtree_docs_custom-tab-layouts.md\":\"DIYFlfWc\",\"garden_the-cozy-web_index.md\":\"BNueo8_T\",\"public_gamedevtree_docs_layer-features.md\":\"I54r8Buk\",\"public_gamedevtree_docs_upgrades.md\":\"BspSzPzA\",\"public_gamedevtree_docs_updating-tmt.md\":\"Clk0TMnI\",\"public_kronos_readme.md\":\"zcQPLTsl\",\"public_kronos_changelog.md\":\"BB6U1JML\",\"public_gamedevtree_docs_milestones.md\":\"Idyk5tE3\",\"public_kronos_docs_!general-info.md\":\"jKiOCSlr\",\"public_kronos_old things_2.0-format-changes.md\":\"BM0FXptY\",\"public_gamedevtree_docs_subtabs-and-microtabs.md\":\"BhlicLTn\",\"public_gamedevtree_docs_main-mod-info.md\":\"SBsEn9C7\",\"public_kronos_docs_custom-tab-layouts.md\":\"D4DCXZo7\",\"public_kronos_docs_bars.md\":\"DU3nCdnU\",\"public_kronos_docs_buyables.md\":\"0zoux8fQ\",\"public_kronos_docs_challenges.md\":\"DvQ_P73q\",\"public_kronos_docs_basic-layer-breakdown.md\":\"BZhX1dEF\",\"public_kronos_docs_grids.md\":\"DGDenQsi\",\"public_kronos_docs_clickables.md\":\"C1ENZgWW\",\"public_kronos_docs_infoboxes.md\":\"BXXHzXvY\",\"public_kronos_docs_achievements.md\":\"CWA5xmwG\",\"public_kronos_docs_getting-started.md\":\"N-haPVCK\",\"public_lit_readme.md\":\"84-k6GVT\",\"public_kronos_docs_layer-features.md\":\"C1uOzCZ-\",\"public_kronos_docs_main-mod-info.md\":\"TWb3xDwG\",\"public_kronos_docs_subtabs-and-microtabs.md\":\"B3i34UtK\",\"public_kronos_docs_trees-and-tree-customization.md\":\"bHBppIK5\",\"public_kronos_docs_milestones.md\":\"BqiEbWx4\",\"public_lit_old things_2.0-format-changes.md\":\"BwaKJMKt\",\"public_kronos_docs_particles.md\":\"a4-BPTpH\",\"public_kronos_docs_updating-tmt.md\":\"BxVzngxM\",\"public_kronos_docs_upgrades.md\":\"D1pH3BI1\",\"public_lit_docs_achievements.md\":\"D0gRoIWt\",\"public_lit_docs_basic-layer-breakdown.md\":\"DKkhjhoJ\",\"public_lit_docs_buyables.md\":\"DrqS8H2k\",\"public_lit_docs_bars.md\":\"DFEFprv8\",\"public_lit_docs_subtabs-and-microtabs.md\":\"BQEflp-r\",\"public_lit_docs_custom-tab-layout
</body>
</html>