pages/public/kronos/docs/grids/index.html

45 lines
27 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US">
<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="stylesheet" href="/assets/style.7893fc09.css">
<link rel="modulepreload" href="/assets/app.e9531dc8.js">
<link rel="modulepreload" href="/assets/public_kronos_docs_grids.md.bb6a8c96.lean.js">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400">
<link rel="manifest" href="/site.webmanifest">
<script defer="true" 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-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-c6a644e1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav no-sidebar" data-v-c6a644e1 data-v-a71a30f1><div class="VPNavBar" data-v-a71a30f1 data-v-6f1d18b5><div class="container" data-v-6f1d18b5><div class="VPNavBarTitle" data-v-6f1d18b5 data-v-d5925166><a class="title" href="/" data-v-d5925166><!--[--><!--]--><!----><!--[-->The Paper Pilot<!--]--><!--[--><!--]--></a></div><div class="content" data-v-6f1d18b5><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6f1d18b5 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide-to-incrementals/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Guide to Incrementals<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/projects/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Projects<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://moddingtree.com" target="_blank" rel="noreferrer" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Profectus<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6f1d18b5 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-1899cd41 data-v-086e8519><span class="check" data-v-086e8519><span class="icon" data-v-086e8519><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1899cd41><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-1899cd41><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-6f1d18b5 data-v-738bef5a data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/thepaperpilot" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><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.2
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">rows</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">4</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// If these are dynamic make sure to have a max value as well!</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">cols</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">getStartData</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">getUnlocked</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// Default</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">getCanClick</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">onClick</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">player</span><span style="color:#F07178;">[</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">layer</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">grid</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">++</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">getDisplay</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">data</span><span style="color:#F07178;"> </span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">etc</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></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><!--[--><!--]--><!----><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide-to-incrementals_index.md\":\"28c9718d\",\"guide-to-incrementals_ludology_appeal-developers.md\":\"e64ceb17\",\"guide-to-incrementals_ludology_appeal-gamers.md\":\"f6d4e5d0\",\"guide-to-incrementals_ludology_content.md\":\"1f41e38f\",\"guide-to-incrementals_ludology_definition.md\":\"c4102960\",\"index.md\":\"c73bfda3\",\"projects_index.md\":\"731b42a4\",\"public_gamedevtree_2.0-format-changes.md\":\"217271e0\",\"public_gamedevtree_readme.md\":\"78107550\",\"public_gamedevtree_changelog.md\":\"f2587796\",\"public_gamedevtree_docs_!general-info.md\":\"a5502bd1\",\"public_gamedevtree_docs_achievements.md\":\"1bc072a9\",\"public_gamedevtree_docs_bars.md\":\"716526e0\",\"public_gamedevtree_docs_basic-layer-breakdown.md\":\"a5f1efc6\",\"public_gamedevtree_docs_buyables.md\":\"5f1f2288\",\"public_gamedevtree_docs_challenges.md\":\"3e8887e1\",\"public_gamedevtree_docs_clickables.md\":\"0ba251c8\",\"public_gamedevtree_docs_custom-tab-layouts.md\":\"d16e7fd1\",\"public_gamedevtree_docs_getting-started.md\":\"609487ab\",\"public_gamedevtree_docs_infoboxes.md\":\"bb5781a4\",\"public_gamedevtree_docs_layer-features.md\":\"a52f61c7\",\"public_gamedevtree_docs_main-mod-info.md\":\"6853261c\",\"public_gamedevtree_docs_milestones.md\":\"1635038d\",\"public_gamedevtree_docs_subtabs-and-microtabs.md\":\"b376e886\",\"public_gamedevtree_docs_updating-tmt.md\":\"4cc2a138\",\"public_gamedevtree_docs_upgrades.md\":\"a39aa163\",\"public_kronos_old things_2.0-format-changes.md\":\"4500c8d3\",\"public_kronos_readme.md\":\"17bf9897\",\"public_kronos_changelog.md\":\"e4951500\",\"public_kronos_docs_!general-info.md\":\"c586db5a\",\"public_kronos_docs_achievements.md\":\"f7a44809\",\"public_kronos_docs_bars.md\":\"71b8cc8a\",\"public_kronos_docs_basic-layer-breakdown.md\":\"211c78af\",\"public_kronos_docs_buyables.md\":\"8a7e4758\",\"public_kronos_docs_challenges.md\":\"a51d59ed\",\"public_kronos_docs_clickables.md\":\"d8e0c110\",\"public_kronos_docs_custom-tab-layouts.md\":\"264b2f40\",\"public_kronos_docs_getting-started.md\":\"1deda510\",\"public_kronos_docs_grids.md\":\"bb6a8c96\",\"public_kronos_docs_infoboxes.md\":\"38382706\",\"public_kronos_docs_layer-features.md\":\"10589753\",\"public_kronos_docs_main-mod-info.md\":\"dc90c42b\",\"public_kronos_docs_milestones.md\":\"625224d2\",\"public_kronos_docs_particles.md\":\"d071da6e\",\"public_kronos_docs_subtabs-and-microtabs.md\":\"80665b53\",\"public_kronos_docs_trees-and-tree-customization.md\":\"15034420\",\"public_kronos_docs_updating-tmt.md\":\"fa200589\",\"public_kronos_docs_upgrades.md\":\"dbbdae14\",\"public_lit_old things_2.0-format-changes.md\":\"66b587d8\",\"public_lit_readme.md\":\"4a72cbff\",\"public_lit_changelog.md\":\"a8eab689\",\"public_lit_docs_!general-info.md\":\"1057a028\",\"public_lit_docs_achievements.md\":\"1a8fc990\",\"public_lit_docs_bars.md\":\"8de3276c\",\"public_lit_docs_basic-layer-breakdown.md\":\"8dac473f\",\"public_lit_docs_buyables.md\":\"05fdb9a3\",\"public_lit_docs_challenges.md\":\"f229730d\",\"public_lit_docs_clickables.md\":\"a851270c\",\"public_lit_docs_custom-tab-layouts.md\":\"c1d4ec6b\",\"public_lit_docs_getting-started.md\":\"70ac5617\",\"public_lit_docs_infoboxes.md\":\"ae20902b\",\"public_lit_docs_layer-features.md\":\"8a8675fe\",\"public_lit_docs_main-mod-info.md\":\"b4735f7a\",\"public_lit_docs_milestones.md\":\"c7d15b5c\",\"public_lit_docs_subtabs-and-microtabs.md\":\"4ee3918f\",\"public_lit_docs_trees-and-tree-customization.md\":\"ab101667\",\"public_lit_docs_updating-tmt.md\":\"ce408f9f\",\"public_lit_docs_upgrades.md\":\"8b96ffe6\"}")</script>
<script type="module" async src="/assets/app.e9531dc8.js"></script>
</body>
</html>