2023-11-07 00:46:27 +00:00
<!DOCTYPE html>
< html lang = "en-US" dir = "ltr" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1" >
< title > Bars | 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" >
2023-11-28 02:32:46 +00:00
< link rel = "modulepreload" href = "/assets/public_lit_docs_bars.md.b9fea664.lean.js" >
2023-11-07 00:46:27 +00:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto+Mono:ital,wght@0,400;0,600;1,400&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_bars" data-v-6b87e69f > < div > < h1 id = "bars" tabindex = "-1" > Bars < a class = "header-anchor" href = "#bars" aria-label = "Permalink to "Bars"" > < / 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 > < 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" > < span style = "color:#B392F0;" > bars< / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > bigBar< / span > < span style = "color:#E1E4E8;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > direction< / span > < span style = "color:#E1E4E8;" > : < / span > < span style = "color:#79B8FF;" > RIGHT< / span > < span style = "color:#E1E4E8;" > ,< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > width< / span > < span style = "color:#E1E4E8;" > : < / span > < span style = "color:#79B8FF;" > 200< / span > < span style = "color:#E1E4E8;" > ,< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > height< / span > < span style = "color:#E1E4E8;" > : < / span > < span style = "color:#79B8FF;" > 50< / span > < span style = "color:#E1E4E8;" > ,< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#B392F0;" > progress< / span > < span style = "color:#E1E4E8;" > () { < / span > < span style = "color:#F97583;" > return< / span > < span style = "color:#E1E4E8;" > < / span > < span style = "color:#79B8FF;" > 0< / span > < span style = "color:#E1E4E8;" > },< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > etc< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > },< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > etc< / span > < / span >
< span class = "line" > < span style = "color:#E1E4E8;" > }< / span > < / span > < / code > < / pre > < pre class = "shiki github-light vp-code-light" > < code > < span class = "line" > < span style = "color:#6F42C1;" > bars< / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > bigBar< / span > < span style = "color:#24292E;" > : {< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > direction< / span > < span style = "color:#24292E;" > : < / span > < span style = "color:#005CC5;" > RIGHT< / span > < span style = "color:#24292E;" > ,< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > width< / span > < span style = "color:#24292E;" > : < / span > < span style = "color:#005CC5;" > 200< / span > < span style = "color:#24292E;" > ,< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > height< / span > < span style = "color:#24292E;" > : < / span > < span style = "color:#005CC5;" > 50< / span > < span style = "color:#24292E;" > ,< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > < / span > < span style = "color:#6F42C1;" > progress< / span > < span style = "color:#24292E;" > () { < / span > < span style = "color:#D73A49;" > return< / span > < span style = "color:#24292E;" > < / span > < span style = "color:#005CC5;" > 0< / span > < span style = "color:#24292E;" > },< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > etc< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > },< / span > < / span >
< span class = "line" > < span style = "color:#24292E;" > etc< / span > < / span >
2023-11-28 02:32:46 +00:00
< span class = "line" > < span style = "color:#24292E;" > }< / span > < / 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 > < 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 = "2023-11-28T02:07:43.000Z" data-v-7e05ebdb > < / time > < / p > < / div > < / div > <!-- --> < / footer > <!-- [ --> <!-- ] --> < / div > < / div > < / div > <!-- [ --> <!-- ] --> < / div > < / div > <!-- --> <!-- [ --> <!-- ] --> < / div > < / div >
< script > w i n d o w . _ _ V P _ H A S H _ M A P _ _ = J S O N . p a r s e ( " { \ " g u i d e - t o - i n c r e m e n t a l s _ i n d e x . m d \ " : \ " a e 9 d 9 a b e \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ l u d o l o g y _ a p p e a l - g a m e r s _ i n d e x . m d \ " : \ " 6 3 2 c 1 a 6 c \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ d e s i g n _ c r i t i c i s m _ i n d e x . m d \ " : \ " b a b c 7 a 8 a \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ l u d o l o g y _ a p p e a l - d e v e l o p e r s _ i n d e x . m d \ " : \ " 1 d 7 9 0 7 d 2 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ l u d o l o g y _ d e f i n i t i o n _ i n d e x . m d \ " : \ " 0 9 5 6 9 5 b 4 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ b a r s . m d \ " : \ " e c 7 c c 3 5 1 \ " , \ " p r o j e c t s _ c i t a d e l _ i n d e x . m d \ " : \ " 1 0 7 f d f 7 9 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ m i l e s t o n e s . m d \ " : \ " 4 5 9 2 1 2 4 7 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ u p g r a d e s . m d \ " : \ " 4 d 0 1 9 3 f 7 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ u p d a t i n g - t m t . m d \ " : \ " 6 3 4 2 6 7 7 4 \ " , \ " p u b l i c _ k r o n o s _ o l d t h i n g s _ 2 . 0 - f o r m a t - c h a n g e s . m d \ " : \ " e d 0 a 3 b 5 6 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ l u d o l o g y _ c o n t e n t _ i n d e x . m d \ " : \ " 1 5 f 9 8 8 8 9 \ " , \ " g u i d e - t o - i n c r e m e n t a l s _ d e s i g n _ i n t r o d u c t i o n _ i n d e x . m d \ " : \ " b d 8 0 d a c f \ " , \ " p u b l i c _ g a m e d e v t r e e _ r e a d m e . m d \ " : \ " b 6 d 5 5 9 b 4 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ c u s t o m - t a b - l a y o u t s . m d \ " : \ " 7 a e d c 5 6 4 \ " , \ " i n d e x . m d \ " : \ " 8 6 5 6 5 c a 9 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ g e t t i n g - s t a r t e d . m d \ " : \ " a 5 5 7 6 7 4 c \ " , \ " p u b l i c _ l i t _ d o c s _ i n f o b o x e s . m d \ " : \ " a 4 1 a 0 b 4 4 \ " , \ " p u b l i c _ l i t _ d o c s _ c l i c k a b l e s . m d \ " : \ " 6 d 4 a 1 5 0 c \ " , \ " p u b l i c _ k r o n o s _ c h a n g e l o g . m d \ " : \ " a a 1 0 0 f a 9 \ " , \ " p u b l i c _ l i t _ c h a n g e l o g . m d \ " : \ " 7 f f c 5 c 5 1 \ " , \ " p u b l i c _ l i t _ d o c s _ ! g e n e r a l - i n f o . m d \ " : \ " c 7 2 9 3 c 4 6 \ " , \ " p u b l i c _ l i t _ d o c s _ a c h i e v e m e n t s . m d \ " : \ " e e 3 2 1 9 2 a \ " , \ " p u b l i c _ l i t _ d o c s _ b a r s . m d \ " : \ " b 9 f e a 6 6 4 \ " , \ " p u b l i c _ l i t _ d o c s _ b a s i c - l a y e r - b r e a k d o w n . m d \ " : \ " 6 a 7 1 3 2 0 2 \ " , \ " p u b l i c _ l i t _ d o c s _ b u y a b l e s . m d \ " : \ " d e 2 5 7 9 e b \ " , \ " p u b l i c _ l i t _ d o c s _ c u s t o m - t a b - l a y o u t s . m d \ " : \ " a 8 f 2 1 b 4 2 \ " , \ " p u b l i c _ l i t _ d o c s _ g e t t i n g - s t a r t e d . m d \ " : \ " 3 c 9 b 5 4 a 0 \ " , \ " p u b l i c _ l i t _ d o c s _ l a y e r - f e a t u r e s . m d \ " : \ " 4 2 4 1 1 a 7 c \ " , \ " p u b l i c _ l i t _ d o c s _ m a i n - m o d - i n f o . m d \ " : \ " 8 5 e 5 9 0 0 5 \ " , \ " p u b l i c _ l i t _ d o c s _ m i l e s t o n e s . m d \ " : \ " c 3 8 1 f 6 7 6 \ " , \ " p u b l i c _ l i t _ d o c s _ s u b t a b s - a n d - m i c r o t a b s . m d \ " : \ " 6 7 f f 4 5 1 2 \ " , \ " p u b l i c _ l i t _ d o c s _ t r e e s - a n d - t r e e - c u s t o m i z a t i o n . m d \ " : \ " b 9 2 1 b d d 3 \ " , \ " p u b l i c _ l i t _ d o c s _ u p d a t i n g - t m t . m d \ " : \ " 7 3 0 c 6 9 3 2 \ " , \ " p u b l i c _ l i t _ d o c s _ u p g r a d e s . m d \ " : \ " 3 3 3 5 0 5 8 b \ " , \ " p u b l i c _ k r o n o s _ d o c s _ c h a l l e n g e s . m d \ " : \ " 0 c 2 6 1 e 6 f \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ c l i c k a b l e s . m d \ " : \ " a 1 9 4 7 8 4 a \ " , \ " p u b l i c _ l i t _ d o c s _ c h a l l e n g e s . m d \ " : \ " 0 2 d 8 6 b 3 6 \ " , \ " p r o j e c t s _ i n d e x . m d \ " : \ " 3 9 a 5 4 3 3 9 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ l a y e r - f e a t u r e s . m d \ " : \ " 1 9 2 9 a 4 1 4 \ " , \ " p u b l i c _ l i t _ r e a d m e . m d \ " : \ " 7 6 d 5 8 5 a 3 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ c l i c k a b l e s . m d \ " : \ " 4 0 8 8 0 b 1 9 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ c u s t o m - t a b - l a y o u t s . m d \ " : \ " c 9 9 1 1 2 6 9 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ t r e e s - a n d - t r e e - c u s t o m i z a t i o n . m d \ " : \ " e e 2 f 3 f 3 e \ " , \ " p u b l i c _ k r o n o s _ d o c s _ u p d a t i n g - t m t . m d \ " : \ " 9 6 9 c 1 9 e 7 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ u p g r a d e s . m d \ " : \ " 3 9 f d 2 d c 4 \ " , \ " p u b l i c _ l i t _ o l d t h i n g s _ 2 . 0 - f o r m a t - c h a n g e s . m d \ " : \ " 7 5 6 5 a 8 c 8 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ ! g e n e r a l - i n f o . m d \ " : \ " 9 f 7 b 2 4 3 8 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ b a s i c - l a y e r - b r e a k d o w n . m d \ " : \ " 8 1 0 7 1 a 5 7 \ " , \ " p u b l i c _ g a m e d e v t r e e _ 2 . 0 - f o r m a t - c h a n g e s . m d \ " : \ " a c 2 c a 1 5 2 \ " , \ " p r o j e c t s _ b a b b l e _ i n d e x . m d \ " : \ " 3 4 6 c 2 b 7 9 \ " , \ " p r o j e c t s _ d i c e _ i n d e x . m d \ " : \ " 2 a a 1 c d 0 a \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ c h a l l e n g e s . m d \ " : \ " 4 c d 0 d a e 3 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ b a s i c - l a y e r - b r e a k d o w n . m d \ " : \ " 4 7 a 2 8 d 0 0 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ ! g e n e r a l - i n f o . m d \ " : \ " 0 c 0 e 9 5 e 5 \ " , \ " p r o j e c t s _ v e c s _ i n d e x . m d \ " : \ " c f b 7 0 a 4 6 \ " , \ " p r o j e c t s _ o p t i s p e e c h _ i n d e x . m d \ " : \ " 7 9 2 4 7 f 3 4 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ i n f o b o x e s . m d \ " : \ " 9 0 1 8 b c 1 b \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ s u b t a b s - a n d - m i c r o t a b s . m d \ " : \ " 9 a 5 4 0 a 9 7 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ a c h i e v e m e n t s . m d \ " : \ " 7 8 4 0 8 6 7 1 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ b u y a b l e s . m d \ " : \ " 5 5 8 1 9 f 1 c \ " , \ " p u b l i c _ k r o n o s _ d o c s _ b a r s . m d \ " : \ " 6 6 f d 7 0 1 4 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ g e t t i n g - s t a r t e d . m d \ " : \ " f 4 4 a f d a b \ " , \ " p u b l i c _ k r o n o s _ d o c s _ g r i d s . m d \ " : \ " b c 6 a 5 c 9 2 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ l a y e r - f e a t u r e s . m d \ " : \ " 0 8 8 4 5 d 8 6 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ m a i n - m o d - i n f o . m d \ " : \ " 6 1 c 9 4 c 0 5 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ m i l e s t o n e s . m d \ " : \ " 3 1 9 7 e 6 a 0 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ p a r t i c l e s . m d \ " : \ " c f 4 0 e d 2 c \ " , \ " p u b l i c _ k r o n o s _ d o c s _ s u b t a b s - a n d - m i c r o t a b s . m d \ " : \ " 5 d 9 8 3 3 f 5 \ " , \ " p u b l i c _ k r o n o s _ d o c s _ i n f o b o x e s . m d \ " : \ " 4 f e a c 0 8 4 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ m a i n - m o d - i n f o . m d \ " : \ " b 5 0 f b 2 0 1 \ " , \ " p u b l i c _ g a m e d e v t r e e _ c h a n g e l o g . m d \ " : \ " e 2 3 c 2 e 4 3 \ " , \ " p u b l i c _ k r o n o s _ r e a d m e . m d \ " : \ " 5 5 c 5 f 5 6 7 \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ a c h i e v e m e n t s . m d \ " : \ " 7 f 7 8 6 d 8 e \ " , \ " p u b l i c _ g a m e d e v t r e e _ d o c s _ b u y a b l e s . m d \ " : \ " 3 6 1 2 8 e 1 0 \ " } " ) ; w i n d o w . _ _ V P _ S I T E _ D A T A _ _ = J S O N . p a r s e ( " { \ " l a n g \ " : \ " e n - U S \ " , \ " d i r \ " : \ " l t r \ " , \ " t i t l e \ " : \ " T h e P a p e r P i l
2023-11-07 00:46:27 +00:00
< / body >
< / html >
