pages/public/kronos/docs/grids.html

52 lines
40 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>Grids | The Paper Pilot</title>
<meta name="description" content="The Paper Pilot's Digital Garden">
<meta name="generator" content="VitePress v1.2.2">
<link rel="preload stylesheet" href="/assets/style.ClAGozCE.css" as="style">
<script type="module" src="/assets/app.SC8ZDGoI.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.CK8QU5WH.js">
<link rel="modulepreload" href="/assets/chunks/theme.CZl6ZJLI.js">
<link rel="modulepreload" href="/assets/public_kronos_docs_grids.md.BeCPe1VG.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">
<link rel="alternate" type="text/mf2+html" href="/changelog">
<link rel="alternate" type="application/rss+xml" title="Changelog" href="/changelog/rss">
<link rel="alternate" type="application/atom+xml" title="Changelog" href="/changelog/atom">
<link rel="alternate" type="application/json+xml" title="Changelog" href="/changelog/json">
<meta name="og:description" content="The Paper Pilot's Digital Garden">
<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-90dd949c data-v-5d98c3a5><!--[--><!--[--><!--]--><!--]--><!--[--><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-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle has-sidebar" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>The Paper Pilot</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://moddingtree.com" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Profectus</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://incremental.social" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Incremental Social</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ccf7ddec data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ccf7ddec data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://code.incremental.social/thepaperpilot" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Forgejo</title><path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"/></svg></a><a class="VPSocialLink no-icon" href="https://matrix.to/#/@thepaperpilot:incremental.social" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7c
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rows</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// If these are dynamic make sure to have a max value as well!</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> cols</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getStartData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getUnlocked</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Default</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getCanClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data, id) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data, id) { </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> player[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.layer].grid[id]</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getDisplay</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data, id) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> etc</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</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&#39;s effect, based on its position and data. (Whatever that means for a gridable)</p></li><li><p>layer: <strong>assigned automagically</strong>. It&#39;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-39a288b8 data-v-d4a0bba5><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-d4a0bba5><span class="visually-hidden" id="doc-footer-aria-label" data-v-d4a0bba5>Pager</span><div class="pager" data-v-d4a0bba5><!----></div><div class="pager" data-v-d4a0bba5><a class="VPLink link pager-link next" href="/garden/my-personal-website" data-v-d4a0bba5><!--[--><span class="desc" data-v-d4a0bba5>Next page</span><span class="title" data-v-d4a0bba5>My Personal Website</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><footer class="vp-doc" data-v-90dd949c><div data-v-90dd949c>CC 2024 The Paper Pilot. <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" data-v-90dd949c>CC BY-NC-SA 4.0</a>.</div><div data-v-90dd949c>Any and all opinions listed here are my own and not representative of my employers; future, past and present.</div><div data-v-90dd949c><a href="https://resume.incremental.social/thepaperpilot/thepaperpilot" data-v-90dd949c>Resume</a> (not actively seeking new opportunities).</div><div data-v-90dd949c>Site built from <a href="https://code.incremental.social/thepaperpilot/pages/commit/6c452e5013699d3253e4f60897c0b5b9fd0e0905" data-v-90dd949c>this commit</a> on <time data-v-90dd949c>Saturday, June 15, 2024 at 10:18:56</time>.</div></footer><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"garden_guide-to-incrementals_what-is-content_index.md\":\"BMETYiAP\",\"public_gamedevtree_docs_infoboxes.md\":\"9a47XYCg\",\"public_kronos_docs_getting-started.md\":\"mdR9VU7R\",\"public_kronos_docs_infoboxes.md\":\"cE2lKUcU\",\"garden_video-game-monetization_index.md\":\"eY03jnxc\",\"garden_chat-glue_index.md\":\"DaP2yUVG\",\"garden_federated-identity_index.md\":\"DXhML-Yi\",\"guide-to-incrementals_ludology_appeal-gamers_index.md\":\"B6xF3S0w\",\"garden_activitypub_index.md\":\"CicDcQ2_\",\"garden_fedi-v2_index.md\":\"BeyeCI12\",\"garden_opti-speech_index.md\":\"fV3laAf8\",\"garden_capture-the-citadel_index.md\":\"CzfQmks-\",\"garden_cinny_index.md\":\"6lP2Zwso\",\"garden_artificial-intelligence_index.md\":\"DHIZV-Nf\",\"garden_premium-currency_index.md\":\"CYRzDOj_\",\"public_lit_docs_clickables.md\":\"B6OakSbD\",\"garden_atproto_index.md\":\"DbIIfL4R\",\"changelog_index.md\":\"BSJxDqIW\",\"garden_planar-pioneers_index.md\":\"C66vsCjv\",\"garden_social-media_index.md\":\"BbHjayFv\",\"garden_incremental-social_index.md\":\"B0XsBHzM\",\"public_gamedevtree_docs_!general-info.md\":\"BwFSZwbZ\",\"garden_the-indieweb_signature-blocks_index.md\":\"BSUq9f2h\",\"garden_logseq_index.md\":\"BiLoV0bt\",\"garden_chronological_index.md\":\"CQEy-T7E\",\"garden_the-small-web_index.md\":\"oczIBNHW\",\"garden_freeform-vs-chronological-dichotomy_index.md\":\"CC0rVLI6\",\"public_gamedevtree_docs_custom-tab-layouts.md\":\"DO3JHVjV\",\"guide-to-incrementals_index.md\":\"CnOUEXtw\",\"guide-to-incrementals_design_criticism_index.md\":\"DIKhcyDO\",\"garden_ivy-road_index.md\":\"I5lUYnjM\",\"garden_weird_index.md\":\"5UcMgku5\",\"garden_game-dev-tree_index.md\":\"CXDRxuvP\",\"garden_the-indieweb_amplification_index.md\":\"DT2TYsGY\",\"garden_webrings_index.md\":\"DVn_-9-u\",\"garden_kronos_index.md\":\"iUhWCop9\",\"garden_the-cozy-web_index.md\":\"BEzt5FqQ\",\"public_gamedevtree_docs_buyables.md\":\"DlXMZmV4\",\"public_kronos_readme.md\":\"CgBYWZCx\",\"public_gamedevtree_docs_milestones.md\":\"DiBU9uxR\",\"public_gamedevtree_docs_layer-features.md\":\"y6Ef1VMc\",\"garden_my-personal-website_index.md\":\"BhgZsyb6\",\"public_kronos_changelog.md\":\"CfILpf_9\",\"public_gamedevtree_docs_upgrades.md\":\"Msxg1C07\",\"public_gamedevtree_docs_updating-tmt.md\":\"37YMR_q4\",\"public_lit_readme.md\":\"C6r_DD7H\",\"garden_mbin_index.md\":\"BHK-Iuf3\",\"public_kronos_docs_upgrades.md\":\"CTKgTXEi\",\"guide-to-incrementals_ludology_appeal-developers_index.md\":\"Cm_ScJQR\",\"public_lit_docs_!general-info.md\":\"D6KB8CTG\",\"public_kronos_docs_main-mod-info.md\":\"CV8Og8jf\",\"public_kronos_docs_subtabs-and-microtabs.md\":\"CAfP6QpE\",\"public_kronos_docs_layer-features.md\":\"sKwRGXXx\",\"garden_mtx_index.md\":\"BRzkTeai\",\"garden_freeform_index.md\":\"CvO7JCJh\",\"public_gamedevtree_docs_clickables.md\":\"Cyab8uw5\",\"garden_my-projects_index.md\":\"6zAg17w1\",\"garden_guide-to-incrementals_navigating-criticism_index.md\":\"FUIN6tkG\",\"garden_wanderstop_index.md\":\"BTJMeiHB\",\"public_kronos_docs_achievements.md\":\"DH7Fd1ef\",\"garden_profectus_index.md\":\"ykiRoiHE\",\"garden_davey-wreden_index.md\":\"DUU5axE-\",\"garden_dice-armor_index.md\":\"CHYRQr4z\",\"garden_this-knowledge-hub_index.md\":\"CUdFhZdq\",\"garden_pre-order-bonuses_index.md\":\"C0-qMrbr\",\"guide-to-incrementals_ludology_definition_index.md\":\"D2MCMru0\",\"public_lit_docs_trees-and-tree-customization.md\":\"DpLqj7LC\",\"public_lit_docs_subtabs-and-microtabs.md\":\"DhbrQf33\",\"public_kronos_docs_updating-tmt.md\":\"_8lPgb0z\",\"public_lit_docs_milestones.md\":\"Cf2Qcvln\",\"public_lit_docs_layer-features.md\":\"sExHYK2Z\",\"public_lit_docs_main-mod-info.md\":\"CVm1BK0i\",\"public_lit_old things_2.0-format-changes.md\":\"BUbI7CBx\",\"public_lit_docs_infoboxes.md\":\"BuPTImhx\",\"public_kronos_docs_custom-tab-layouts.md\":\"C9uDrIM0\",\"public_lit_docs_upgrades.md\":\"BttvCS4L\",\"public_lit_docs_bars.md\":\"B1h0O1rn\",\"public_kronos_docs_particles.md\":\"acAe5suw\",\"public_lit_docs_challenges.md\":\"BoYK1lsk\",\"public_kronos_docs_
</body>
</html>