<divid="app"><divclass="Layout"data-v-5d98c3a5><!--[--><!--]--><!--[--><spantabindex="-1"data-v-0f60ec36></span><ahref="#VPContent"class="VPSkipLink visually-hidden"data-v-0f60ec36> Skip to content </a><!--]--><!----><headerclass="VPNav"data-v-5d98c3a5data-v-ae24b3ad><divclass="VPNavBar top"data-v-ae24b3addata-v-ccf7ddec><divclass="wrapper"data-v-ccf7ddec><divclass="container"data-v-ccf7ddec><divclass="title"data-v-ccf7ddec><divclass="VPNavBarTitle"data-v-ccf7ddecdata-v-ab179fa1><aclass="title"href="/"data-v-ab179fa1><!--[--><!--]--><!----><spandata-v-ab179fa1>The Paper Pilot</span><!--[--><!--]--></a></div></div><divclass="content"data-v-ccf7ddec><divclass="content-body"data-v-ccf7ddec><!--[--><!--]--><divclass="VPNavBarSearch search"data-v-ccf7ddec><!----></div><navaria-labelledby="main-nav-aria-label"class="VPNavBarMenu menu"data-v-ccf7ddecdata-v-7f418b0f><spanid="main-nav-aria-label"class="visually-hidden"data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/guide-to-incrementals/"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Guide to Incrementals</span><!--]--></a><!--]--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/projects/"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Projects</span><!--]--></a><!--]--><!--[--><aclass="VPLink link vp-external-link-icon VPNavBarMenuLink"href="https://moddingtree.com"target="_blank"rel="noreferrer"tabindex="0"data-v-7f418b0fdata-v-9c663999><!--[--><spandata-v-9c663999>Profectus</span><!--]--></a><!--]--><!--]--></nav><!----><divclass="VPNavBarAppearance appearance"data-v-ccf7ddecdata-v-e6aabb21><buttonclass="VPSwitch VPSwitchAppearance"type="button"role="switch"title="Switch to dark theme"aria-checked="false"data-v-e6aabb21data-v-d1f28634data-v-1d5665e3><spanclass="check"data-v-1d5665e3><spanclass="icon"data-v-1d5665e3><!--[--><spanclass="vpi-sun sun"data-v-d1f28634></span><spanclass="vpi-moon moon"data-v-d1f28634></span><!--]--></span></span></button></div><divclass="VPSocialLinks VPNavBarSocialLinks social-links"data-v-ccf7ddecdata-v-0394ad82data-v-7bc22406><!--[--><aclass="VPSocialLink no-icon"href="https://github.com/thepaperpilot"aria-label="github"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-github"/></a><aclass="VPSocialLink no-icon"href="https://www.linkedin.com/pub/anthony-lawn/a9/a98/2"aria-label="linkedin"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-linkedin"/></a><aclass="VPSocialLink no-icon"href="https://discord.gg/yJ4fjnjU54"aria-label="discord"target="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><spanclass="vpi-social-discord"/></a><aclass="VPSocialLink no-icon"href="https://mastodon.gamedev.place/@thepaperpilot"aria-labeltarget="_blank"rel="noopener"data-v-7bc22406data-v-eee4e7cb><svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="currentColor"class="bi bi-mastodon"viewBox="0 0 16 16">
</svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><buttontype="button"class="VPNavBarHamburger hamburger"aria-label="mobile navigation"aria-expanded="false"aria-controls="VPNavScreen"data-v-ccf7ddecdata-v-e5dd9c1c><spanclass="container"data-v-e5dd9c1c><spanclass="top"data-v-e5dd9c1c></span><spanclass="middle"data-v-e5dd9c1c></span><spanclass="bottom"data-v-e5dd9c1c></span></span></button></div></div></div></div><divclass="divider"data-v-ccf7ddec><divclass="divider-line"data-v-ccf7ddec></div></div></div><!----></header><divclass="VPLocalNav empty fixed"data-v-5d98c3a5data-v-a6f0e41e><divclass="container"data-v-a6f0e41e><!----><divclass="VPLocalNavOutlineDropdown"style="--vp-vh:0px;"data-v-a6f0e41edata-v-17a5e62e><buttondata-v-17a5e62e>Return to top</button><!----></div></div></div><!----><divclass="VPContent"id="VPContent"data-v-5d98c3a5data-v-1428d186><divclass="VPDoc has-aside"data-v-1428d186data-v-39a288b8><!--[--><!--]--><divclass="container"data-v-39a288b8><divclass="aside"data-v-39a288b8><divclass="aside-curtain"data-v-39a288b8></div><divclass="aside-container"data-v-39a288b8><divclass="aside-content"data-v-39a288b8><divclass="VPDocAside"data-v-39a288b8data-v-3f215769><!--[--><!--]--><!--[--><!--]--><navaria-labelledby="doc-outline-aria-label"class="VPDocAsideOutline"data-v-3f215769data-v-a5bbad30><divclass="content"data-v-a5bbad30><divclass="outline-marker"data-v-a5bbad30></div><divaria-level="2"class="outline-title"id="doc-outline-aria-label"role="heading"data-v-a5bbad30>On this page</div><ulclass="VPDocOutlineItem root"data-v-a5bbad30data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><divclass="spacer"data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><divclass="content"data-v-39a288b8><divclass="content-container"data-v-39a288b8><!--[--><!--]--><mainclass="main"data-v-39a288b8><divstyle="position:relative;"class="vp-doc _public_gamedevtree_docs_infoboxes"data-v-39a288b8><div><h1id="infoboxes"tabindex="-1">Infoboxes <aclass="header-anchor"href="#infoboxes"aria-label="Permalink to "Infoboxes""></a></h1><p>Infoboxes are good for displaying "lore", or story elements, as well as for explaining complicated things.</p><p>In the default tab layout, the first infobox will be displayed at the very top of the tab.</p><p>Infoboxes are defined like other Big Features:</p><divclass="language-js vp-adaptive-theme"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">js</span><preclass="shiki shiki-themes github-light github-dark vp-code"tabindex="0"><code><spanclass="line"><spanstyle="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> infoboxes</span><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<spanclass="line"><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span></code></pre></div><p>Features:</p><ul><li><p>title: The text displayed above the main box. Can be a function to be dynamic, and can use basic HTML.</p></li><li><p>body: The text displayed inside the box. Can be a function to be dynamic, and can use basic HTML.</p></li><li><p>style, titleStyle, bodyStyle: <strong>Optional</strong>, Apply CSS to the infobox, or to the title button or body of the infobox, in the form of an object where the keys are CSS attributes, and the values are the Values for those attributes (both as strings).</p></li><li><p>unlocked(): <strong>optional</strong>, A function returning a bool to determine if the infobox is visible or not. Default is unlocked.</p></li><li><p>layer: <strong>Assigned automagically</strong>. It's the same value as the name of this layer, so you can do player[this.layer].points or similar</p></li><li><p>id: <strong>Assigned automagically</strong>. It's the "key" which the bar was stored under, for convenient access. The bar in the example's id is "bigBar".</p></li></ul></div></div></main><footerclass="VPDocFooter"data-v-39a288b8data-v-d4a0bba5><!--[--><!--]--><divclass="edit-info"data-v-d4a0bba5><!----><divclass="last-updated"data-v-d4a0bba5><pclass="VPLastUpdated"data-v-d4a0bba5data-v-7e05ebdb>Last updated: <timedatetime="2023-11-28T02:07:21.000Z"data-v-7e05ebdb></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
