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

36 lines
33 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 portfolio site">
<link rel="preload stylesheet" href="/assets/style.3ee67463.css" as="style">
<script type="module" src="/assets/app.88fb6cf0.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.1169fbc9.js">
<link rel="modulepreload" href="/assets/chunks/theme.c36cb2db.js">
<link rel="modulepreload" href="/assets/public_lit_docs_trees-and-tree-customization.md.5cb2e22e.lean.js">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico&amp;family=Roboto+Mono:ital,wght@0,400;0,600;1,400&amp;display=swap">
<link rel="manifest" href="/site.webmanifest">
<script defer data-domain="thepaperpilot.org" src="https://plausible.io/js/plausible.js"></script>
<meta name="og:description" content="The Paper Pilot portfolio site">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><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-5a346dfe data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/" data-v-86d1bed8><!--[--><!--]--><!----><!--[-->The Paper Pilot<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide-to-incrementals/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide to Incrementals</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/projects/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Projects</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://moddingtree.com" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Profectus</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/thepaperpilot" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" x
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/>
</svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/thepaperpilot" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://www.linkedin.com/pub/anthony-lawn/a9
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/>
</svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav fixed reached-top" data-v-5a346dfe data-v-79c8c1df><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><!----><div class="VPContent" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _public_lit_docs_trees-and-tree-customization" data-v-6b87e69f><div><h1 id="trees-and-tree-customization" tabindex="-1">Trees and tree customization <a class="header-anchor" href="#trees-and-tree-customization" aria-label="Permalink to &quot;Trees and tree customization&quot;"></a></h1><p>If you want to have something beyond the standard tree on the left tab, you can do that in tree.js. You can change the layout of the tree, including making non-layer nodes, change it into something other than a tree, or hide the left tab altogether. This also introduces the &quot;tree&quot; component, which can be used in your layers as well.</p><h2 id="layoutinfo" tabindex="-1">layoutInfo <a class="header-anchor" href="#layoutinfo" aria-label="Permalink to &quot;layoutInfo&quot;"></a></h2><p>The most important part is layoutInfo, containing:</p><ul><li>startTab: The id of the default tab to show on the left at the start.</li><li>showTree: True if the tree tab should be shown at the start of the game. (The other tab will fill the whole page)</li><li>treeLayout: If present, overrides the tree layout and places nodes as you describe instead (explained in the next section).</li></ul><p>Additionally, if you want the main layout to not be a tree, you can edit the &quot;tree-tab&quot; layer at the bottom of tree.js to modify it just like a normal layer&#39;s tab. You can even switch between left tabs, using showNavTab(layer) to make that layer appear on the left.</p><h2 id="trees" tabindex="-1">Trees <a class="header-anchor" href="#trees" aria-label="Permalink to &quot;Trees&quot;"></a></h2><p>The tree component is defined as an array of arrays of names of layers or nodes to show in the tree. They work just like layers/ nodes in the main tree (but branches between nodes will only work on the first node if you have duplicates.)</p><p>Here is an example tree:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><sp
<span class="line"><span style="color:#E1E4E8;"> [</span><span style="color:#9ECBFF;">&quot;left&quot;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&quot;blank&quot;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&quot;right&quot;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&quot;blank&quot;</span><span style="color:#E1E4E8;">]</span></span>
<span class="line"><span style="color:#E1E4E8;"> [</span><span style="color:#9ECBFF;">&quot;a&quot;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&quot;b&quot;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&quot;blank&quot;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&quot;c&quot;</span><span style="color:#E1E4E8;">, </span><span style="color:#9ECBFF;">&quot;weirdButton&quot;</span><span style="color:#E1E4E8;">]]</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">[[</span><span style="color:#032F62;">&quot;p&quot;</span><span style="color:#24292E;">],</span></span>
<span class="line"><span style="color:#24292E;"> [</span><span style="color:#032F62;">&quot;left&quot;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&quot;blank&quot;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&quot;right&quot;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&quot;blank&quot;</span><span style="color:#24292E;">]</span></span>
<span class="line"><span style="color:#24292E;"> [</span><span style="color:#032F62;">&quot;a&quot;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&quot;b&quot;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&quot;blank&quot;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&quot;c&quot;</span><span style="color:#24292E;">, </span><span style="color:#032F62;">&quot;weirdButton&quot;</span><span style="color:#24292E;">]]</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-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><!----><div class="last-updated" data-v-ef5dee53><p class="VPLastUpdated" data-v-ef5dee53 data-v-7e05ebdb>Last updated: <time datetime="2022-10-05T00:47:12.000Z" data-v-7e05ebdb></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"public_kronos_old things_2.0-format-changes.md\":\"01e6cf21\",\"public_kronos_docs_!general-info.md\":\"a2b0cacb\",\"public_kronos_docs_bars.md\":\"d76e8fe1\",\"public_kronos_docs_buyables.md\":\"1fc0cb4b\",\"public_kronos_docs_achievements.md\":\"87e51d9c\",\"public_kronos_docs_basic-layer-breakdown.md\":\"21ce399d\",\"public_kronos_docs_custom-tab-layouts.md\":\"419753ca\",\"public_kronos_docs_getting-started.md\":\"d3fc63be\",\"public_kronos_docs_challenges.md\":\"8e58ea7f\",\"public_kronos_docs_layer-features.md\":\"162192ee\",\"public_kronos_docs_infoboxes.md\":\"aaf3ac06\",\"public_kronos_docs_grids.md\":\"d08f6e38\",\"public_kronos_docs_main-mod-info.md\":\"07830185\",\"public_kronos_docs_clickables.md\":\"6b6e0c98\",\"public_gamedevtree_docs_!general-info.md\":\"edf0e4f0\",\"guide-to-incrementals_ludology_appeal-gamers_index.md\":\"cc18f4cc\",\"guide-to-incrementals_ludology_content_index.md\":\"0335dc81\",\"guide-to-incrementals_ludology_appeal-developers_index.md\":\"d54da3c8\",\"index.md\":\"8bac09fe\",\"projects_babble_index.md\":\"59e7069b\",\"projects_citadel_index.md\":\"ffa914c3\",\"projects_dice_index.md\":\"22ad0d23\",\"projects_index.md\":\"3e0cc6a3\",\"projects_optispeech_index.md\":\"75c773d8\",\"public_gamedevtree_2.0-format-changes.md\":\"b269d5ac\",\"projects_vecs_index.md\":\"51c53188\",\"public_gamedevtree_readme.md\":\"c8727831\",\"public_gamedevtree_docs_upgrades.md\":\"f2da5968\",\"public_lit_docs_custom-tab-layouts.md\":\"f908e848\",\"public_gamedevtree_changelog.md\":\"359863a4\",\"public_gamedevtree_docs_achievements.md\":\"b946ed90\",\"public_lit_old things_2.0-format-changes.md\":\"1c4753bc\",\"public_gamedevtree_docs_subtabs-and-microtabs.md\":\"7e17729a\",\"public_gamedevtree_docs_milestones.md\":\"d3d14cdf\",\"public_lit_docs_subtabs-and-microtabs.md\":\"9c5c6883\",\"public_lit_docs_infoboxes.md\":\"fb00fba0\",\"public_kronos_docs_milestones.md\":\"943678fc\",\"public_lit_docs_getting-started.md\":\"1c4d3077\",\"public_gamedevtree_docs_updating-tmt.md\":\"3abb786e\",\"public_lit_docs_upgrades.md\":\"02ce1421\",\"public_gamedevtree_docs_custom-tab-layouts.md\":\"88f2716c\",\"public_gamedevtree_docs_infoboxes.md\":\"20dc07f1\",\"public_kronos_readme.md\":\"1d24f81b\",\"public_lit_docs_milestones.md\":\"65084c13\",\"public_gamedevtree_docs_basic-layer-breakdown.md\":\"a0080021\",\"public_lit_docs_updating-tmt.md\":\"81e44c79\",\"public_gamedevtree_docs_bars.md\":\"8820f30f\",\"public_kronos_docs_updating-tmt.md\":\"6ef74952\",\"public_lit_readme.md\":\"37700f83\",\"public_kronos_changelog.md\":\"214bb4a9\",\"public_lit_docs_clickables.md\":\"e36de12e\",\"public_gamedevtree_docs_getting-started.md\":\"728b1c5a\",\"public_gamedevtree_docs_challenges.md\":\"2aededa1\",\"public_lit_docs_main-mod-info.md\":\"8b9794d9\",\"public_lit_docs_trees-and-tree-customization.md\":\"5cb2e22e\",\"public_gamedevtree_docs_clickables.md\":\"071614e7\",\"public_gamedevtree_docs_buyables.md\":\"aaf2dbf0\",\"public_lit_docs_bars.md\":\"12a2ea1f\",\"guide-to-incrementals_index.md\":\"15e8a709\",\"public_kronos_docs_subtabs-and-microtabs.md\":\"6172e2b9\",\"public_lit_docs_challenges.md\":\"cdc3d397\",\"guide-to-incrementals_design_introduction_index.md\":\"e42aeae1\",\"public_gamedevtree_docs_main-mod-info.md\":\"e47f311e\",\"public_kronos_docs_upgrades.md\":\"33de426a\",\"guide-to-incrementals_ludology_definition_index.md\":\"2d700f3c\",\"guide-to-incrementals_design_criticism_index.md\":\"c03c43ef\",\"public_lit_changelog.md\":\"07a3430c\",\"public_kronos_docs_trees-and-tree-customization.md\":\"50820db8\",\"public_lit_docs_basic-layer-breakdown.md\":\"537c8e8d\",\"public_lit_docs_!general-info.md\":\"a19e7dda\",\"public_lit_docs_achievements.md\":\"da2fc65b\",\"public_lit_docs_layer-features.md\":\"107a6243\",\"public_lit_docs_buyables.md\":\"59dff372\",\"public_gamedevtree_docs_layer-features.md\":\"358536c6\",\"public_kronos_docs_particles.md\":\"f44e1f6e\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"The Paper Pil
</body>
</html>