<divid="app"><divclass="Layout"data-v-f44a984a><!--[--><!--]--><!--[--><spantabindex="-1"data-v-151f2593></span><ahref="#VPContent"class="VPSkipLink visually-hidden"data-v-151f2593> Skip to content </a><!--]--><!----><headerclass="VPNav no-sidebar"data-v-f44a984adata-v-a50780ff><divclass="VPNavBar"data-v-a50780ffdata-v-6f1d18b5><divclass="container"data-v-6f1d18b5><divclass="VPNavBarTitle"data-v-6f1d18b5data-v-d5925166><aclass="title"href="/"data-v-d5925166><!--[--><!--]--><!----><!--[-->The Paper Pilot<!--]--><!--[--><!--]--></a></div><divclass="content"data-v-6f1d18b5><!--[--><!--]--><!----><navaria-labelledby="main-nav-aria-label"class="VPNavBarMenu menu"data-v-6f1d18b5data-v-f83db6ba><spanid="main-nav-aria-label"class="visually-hidden"data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/guide-to-incrementals/"data-v-f83db6badata-v-47a2263edata-v-3c355974><!--[-->Guide to Incrementals<!--]--><!----></a><!--]--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="/projects/"data-v-f83db6badata-v-47a2263edata-v-3c355974><!--[-->Projects<!--]--><!----></a><!--]--><!--[--><aclass="VPLink link VPNavBarMenuLink"href="https://moddingtree.com"target="_blank"rel="noreferrer"data-v-f83db6badata-v-47a2263edata-v-3c355974><!--[-->Profectus<!--]--><!----></a><!--]--><!--]--></nav><!----><divclass="VPNavBarAppearance appearance"data-v-6f1d18b5data-v-a3e7452b><buttonclass="VPSwitch VPSwitchAppearance"type="button"role="switch"aria-label="toggle dark mode"aria-checked="false"data-v-a3e7452bdata-v-481098f9data-v-eba7420e><spanclass="check"data-v-eba7420e><spanclass="icon"data-v-eba7420e><!--[--><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"viewbox="0 0 24 24"class="sun"data-v-481098f9><pathd="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><pathd="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><pathd="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><pathd="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><pathd="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><pathd="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><pathd="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><pathd="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><pathd="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><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"viewbox="0 0 24 24"class="moon"data-v-481098f9><pathd="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><divclass="VPSocialLinks VPNavBarSocialLinks social-links"data-v-6f1d18b5data-v-738bef5adata-v-f6988cfb><!--[--><aclass="VPSocialLink"href="https://github.com/thepaperpilot"target="_blank"rel="noopener"data-v-f6988cfbdata-v-e57698f6><svgrole="img"viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><pathd="M12.297c-6.630-125.373-121205.3033.4389.88.20511.385.6.113.82-.258.82-.5770-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.42218.073.63317.73.63317.7c-1.087-.744.084-.729.084-.7291.2
</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-6f1d18b5data-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><!----></header><!----><!----><divclass="VPContent"id="VPContent"data-v-f44a984adata-v-d981fe29><divclass="VPDoc has-aside"data-v-d981fe29data-v-cfb513e0><divclass="container"data-v-cfb513e0><divclass="aside"data-v-cfb513e0><divclass="aside-curtain"data-v-cfb513e0></div><divclass="aside-container"data-v-cfb513e0><divclass="aside-content"data-v-cfb513e0><divclass="VPDocAside"data-v-cfb513e0data-v-afc4c1a1><!--[--><!--]--><!--[--><!--]--><divclass="VPDocAsideOutline"data-v-afc4c1a1data-v-2865c0b0><divclass="content"data-v-2865c0b0><divclass="outline-marker"data-v-2865c0b0></div><divclass="outline-title"data-v-2865c0b0>On this page</div><navaria-labelledby="doc-outline-aria-label"data-v-2865c0b0><spanclass="visually-hidden"id="doc-outline-aria-label"data-v-2865c0b0> Table of Contents for current page </span><ulclass="root"data-v-2865c0b0data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><divclass="spacer"data-v-afc4c1a1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><divclass="content"data-v-cfb513e0><divclass="content-container"data-v-cfb513e0><!--[--><!--]--><mainclass="main"data-v-cfb513e0><divstyle="position:relative;"class="vp-doc _public_kronos_docs_bars"data-v-cfb513e0><div><h1id="bars"tabindex="-1">Bars <aclass="header-anchor"href="#bars"aria-hidden="true">#</a></h1><p>Bars let you display information in a more direct way. It can be a progress bar, health bar, capacity gauge, or anything else.</p><p>Bars are defined like other Big Features:</p><divclass="language-js"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">js</span><preclass="shiki"><code><spanclass="line"><spanstyle="color:#FFCB6B;">bars</span><spanstyle="color:#89DDFF;">:</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">{</span></span>
<spanclass="line"></span></code></pre></div><p>Features:</p><ul><li><p>direction: UP, DOWN, LEFT, or RIGHT (not strings). Determines the direction that the bar is filled as it progresses. RIGHT means from left to right.</p></li><li><p>width, height: The size in pixels of the bar, but as numbers (no "px" at the end).</p></li><li><p>progress(): A function that returns the portion of the bar that is filled, from "empty" at 0 to "full" at 1, updating automatically. (Nothing bad happens if the value goes out of these bounds, and it can be a number or <code>Decimal</code>)</p></li><li><p>display(): <strong>optional</strong>. A function that returns text to be displayed on top of the bar, can use HTML.</p></li><li><p>unlocked(): <strong>optional</strong>. A function returning a bool to determine if the bar is visible or not. Default is unlocked.</p></li><li><p>baseStyle, fillStyle, borderStyle, textStyle: <strong>Optional</strong>, Apply CSS to the unfilled portion, filled portion, border, and display text on the bar, 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>layer: <strong>assigned automagically</strong>. It's the same value as the name of this layer, so you can do <code>player[this.layer].points</code> 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><!--[--><!--]--><!----><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
