72 lines
No EOL
36 KiB
HTML
72 lines
No EOL
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Grids | 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_kronos_docs_grids.md.d08f6e38.lean.js">
|
||
<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" 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/a98/2" aria-label="linkedin" 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>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a><a class="VPSocialLink no-icon" href="https://discord.gg/yJ4fjnjU54" aria-label="discord" 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>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><a class="VPSocialLink no-icon" href="https://mastodon.gamedev.place/@thepaperpilot" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
|
||
<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/a98/2" aria-label="linkedin" 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>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a><a class="VPSocialLink no-icon" href="https://discord.gg/yJ4fjnjU54" aria-label="discord" 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>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><a class="VPSocialLink no-icon" href="https://mastodon.gamedev.place/@thepaperpilot" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
|
||
<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_kronos_docs_grids" data-v-6b87e69f><div><h1 id="grids" tabindex="-1">Grids <a class="header-anchor" href="#grids" aria-label="Permalink to "Grids""></a></h1><p>Grids are an easier way of making a group of similar clickables. They all have the same behavior, but are different based on their data.</p><p><strong>NOTE: Gridables are similar to clickables in some respects, but are fundamentally different from normal TMT components in quite a few ways. Be sure to keep these in mind:</strong></p><ul><li>Gridable ids use base 100 instead of base 10, so you can have more than 10 tiles in a row. This means that a grid might look like this: 101 102 201 202</li><li>Individual gridables are not defined individually. All properties go directly into the "grid" object. Functions are called with arguments for the id of the gridables and its associated data, so you can give them the appropriate appearance and properties based on that.</li><li>If you need two unrelated grids in a layer, you'll need to use a layer proxy component.</li></ul><p>Useful functions for dealing with grids:</p><ul><li>getGridData(layer, id): get the data for the chosen gridable</li><li>setGridData(layer, id, state): set the data for the chosen gridable</li><li>gridEffect(layer, id): get the effect for the chosen gridable</li></ul><p>The grid should be formatted like this:</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;">grid</span><span style="color:#E1E4E8;">: {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rows</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">4</span><span style="color:#E1E4E8;">, </span><span style="color:#6A737D;">// If these are dynamic make sure to have a max value as well!</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">cols</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">5</span><span style="color:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">getStartData</span><span style="color:#E1E4E8;">(id) {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">getUnlocked</span><span style="color:#E1E4E8;">(id) { </span><span style="color:#6A737D;">// Default</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">true</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">getCanClick</span><span style="color:#E1E4E8;">(data, id) {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">true</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onClick</span><span style="color:#E1E4E8;">(data, id) { </span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> player[</span><span style="color:#79B8FF;">this</span><span style="color:#E1E4E8;">.layer].grid[id]</span><span style="color:#F97583;">++</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">getDisplay</span><span style="color:#E1E4E8;">(data, id) {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> data </span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> },</span></span>
|
||
<span class="line"></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;">grid</span><span style="color:#24292E;">: {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rows</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">4</span><span style="color:#24292E;">, </span><span style="color:#6A737D;">// If these are dynamic make sure to have a max value as well!</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">cols</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">5</span><span style="color:#24292E;">,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">getStartData</span><span style="color:#24292E;">(id) {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0</span></span>
|
||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">getUnlocked</span><span style="color:#24292E;">(id) { </span><span style="color:#6A737D;">// Default</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">true</span></span>
|
||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">getCanClick</span><span style="color:#24292E;">(data, id) {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">true</span></span>
|
||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onClick</span><span style="color:#24292E;">(data, id) { </span></span>
|
||
<span class="line"><span style="color:#24292E;"> player[</span><span style="color:#005CC5;">this</span><span style="color:#24292E;">.layer].grid[id]</span><span style="color:#D73A49;">++</span></span>
|
||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">getDisplay</span><span style="color:#24292E;">(data, id) {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> data </span></span>
|
||
<span class="line"><span style="color:#24292E;"> },</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"> etc</span></span>
|
||
<span class="line"><span style="color:#24292E;">}</span></span></code></pre></div><p>Features:</p><ul><li><p>rows, cols: The amount of rows and columns of gridable to display.</p></li><li><p>maxRows, maxCols: <strong>sometimes needed</strong>. If rows or cols are dynamic, you need to define the maximum amount that there can be (you can increase it when you update the game though). These CANNOT be dynamic.</p></li><li><p>getStartData(id): Creates the default data for the gridable at this position. This can be an object, or a regular value.</p></li><li><p>getUnlocked(id): <strong>optional</strong>. Returns true if the gridable at this position should be visible.</p></li><li><p>getTitle(data, id): <strong>optional</strong>. Returns text that should displayed at the top in a larger font, based on the position and data of the gridable.</p></li><li><p>getDisplay(data, id): <strong>optional</strong>. Returns everything that should be displayed on the gridable after the title, based on the position and data of the gridable.</p></li><li><p>getStyle(data, id): <strong>optional</strong>. Returns CSS to apply to this gridable, 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>getCanClick(data, id): <strong>optional</strong>. A function returning a bool to determine if you can click a gridable, based on its data and position. If absent, you can always click it.</p></li><li><p>onClick(data, id): A function that implements clicking on the gridable, based on its position and data.</p></li><li><p>onHold(data, id): <strong>optional</strong> A function that is called 20x/sec when the button is held for at least 0.25 seconds.</p></li><li><p>getEffect(data, id): <strong>optional</strong>. A function that calculates and returns a gridable's effect, based on its position and data. (Whatever that means for a gridable)</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></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:46:54.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 Pilot\",\"description\":\"The Paper Pilot portfolio site\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"outline\":\"deep\",\"nav\":[{\"text\":\"Guide to Incrementals\",\"link\":\"/guide-to-incrementals/\",\"activeMatch\":\"^/guide-to-incrementals\"},{\"text\":\"Projects\",\"link\":\"/projects/\",\"activeMatch\":\"^/projects\"},{\"text\":\"Profectus\",\"link\":\"https://moddingtree.com\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/thepaperpilot\"},{\"icon\":\"linkedin\",\"link\":\"https://www.linkedin.com/pub/anthony-lawn/a9/a98/2\"},{\"icon\":\"discord\",\"link\":\"https://discord.gg/yJ4fjnjU54\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"16\\\" height=\\\"16\\\" fill=\\\"currentColor\\\" class=\\\"bi bi-mastodon\\\" viewBox=\\\"0 0 16 16\\\">\\n <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\\\"/>\\n</svg>\"},\"link\":\"https://mastodon.gamedev.place/@thepaperpilot\"}],\"sidebar\":{\"guide-to-incrementals\":[{\"text\":\"Ludology\",\"collapsible\":true,\"items\":[{\"text\":\"Defining the Genre\",\"link\":\"/guide-to-incrementals/ludology/definition\"},{\"text\":\"Appeal to Players\",\"link\":\"/guide-to-incrementals/ludology/appeal-gamers\"},{\"text\":\"Appeal to Developers\",\"link\":\"/guide-to-incrementals/ludology/appeal-developers\"},{\"text\":\"What is Content?\",\"link\":\"/guide-to-incrementals/ludology/content\"}]},{\"text\":\"Development\",\"collapsible\":true,\"items\":[{\"text\":\"Navigating Criticism\",\"link\":\"/guide-to-incrementals/design/criticism\"}]}],\"projects\":[{\"text\":\"Play Now\",\"items\":[{\"text\":\"Planar Pioneers\",\"link\":\"https://thepaperpilot.org/planar\"},{\"text\":\"Advent Incremental\",\"link\":\"https://thepaperpilot.org/advent\"},{\"text\":\"Kronos\",\"link\":\"https://thepaperpilot.org/kronos/\"},{\"text\":\"Game Dev Tree\",\"link\":\"https://thepaperpilot.org/gamedevtree/\"},{\"text\":\"Lit\",\"link\":\"https://thepaperpilot.org/lit/\"},{\"text\":\"The Ascension Tree\",\"link\":\"https://thepaperpilot.org/the_ascension_tree/\"},{\"text\":\"Dream Hero\",\"link\":\"https://thepaperpilot.org/dream/\"},{\"text\":\"My Itch Page\",\"link\":\"https://thepaperpilot.itch.io/\"}]},{\"text\":\"Downloads\",\"items\":[{\"text\":\"Dice Armor\",\"link\":\"/projects/dice/\"},{\"text\":\"Capture the Citadel\",\"link\":\"/projects/citadel/\"}]},{\"text\":\"Non-Games\",\"items\":[{\"text\":\"V-ecs\",\"link\":\"/projects/vecs/\"},{\"text\":\"OptiSpeech\",\"link\":\"/projects/optispeech/\"},{\"text\":\"Babble Buds\",\"link\":\"/projects/babble/\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
|
||
|
||
</body>
|
||
</html> |