<spanclass="line"><spanstyle="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Each achievement should have an id where the first digit is the row and the second digit is the column.</p><p>Individual achievement can have these features:</p><ul><li><p>name: <strong>optional</strong>. displayed at the top of the achievement. The only visible text. It can also be a function that returns updating text. Can use basic HTML.</p></li><li><p>done(): A function returning a boolean to determine if the achievement should be awarded.</p></li><li><p>tooltip: Default tooltip for the achievement, appears when it is hovered over. Should convey the goal and any reward for completing the achievement. It can also be a function that returns updating text. Can use basic HTML. Setting this to "" disables the tooltip.</p></li><li><p>effect(): <strong>optional</strong>. A function that calculates and returns the current values of any bonuses from the achievement. Can return a value or an object containing multiple values.</p></li><li><p>unlocked(): <strong>optional</strong>. A function returning a bool to determine if the achievement is visible or not. Default is unlocked.</p></li><li><p>onComplete() - <strong>optional</strong>. this function will be called when the achievement is completed.</p></li><li><p>image: <strong>optional</strong>, puts the image from the given URL (relative or absolute) in the achievement</p></li><li><p>style: <strong>optional</strong>. Applies CSS to this achievement, 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>textStyle: <strong>optional</strong>. Applies CSS to the text, 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 achievement was stored under, for convenient access. The achievement in the example's id is 11.</p></li><li><p>goalTooltip: <strong>optional, deprecated</strong>. Appears when the achievement is hovered over and locked, overrides the basic tooltip. This is to display the goal (or a hint). It can also be a function that returns updating text. Can use basic HTML.</p></li><li><p>doneTooltip: <strong>optional, deprecated</strong>. Appears when the achievement is hovered over and completed, overrides the basic tooltip. This can display what the player achieved (the goal), and the rewards, if any. It can also be a function that returns updating text. Can use basic HTML.</p></li></ul><p>Disable achievement popups by adding <code>achievementsPopups: false</code> to the layer.</p></div></div></main><footerclass="VPDocFooter"data-v-39a288b8data-v-d4a0bba5><!--[--><!--]--><!----><navclass="prev-next"aria-labelledby="doc-footer-aria-label"data-v-d4a0bba5><spanclass="visually-hidden"id="doc-footer-aria-label"data-v-d4a0bba5>Pager</span><divclass="pager"data-v-d4a0bba5><!----></div><divclass="pager"data-v-d4a0bba5><aclass="VPLink link pager-link next"href="/garden/the-small-web"data-v-d4a0bba5><!--[--><spanclass="desc"data-v-d4a0bba5>Next page</span><spanclass="title"data-v-d4a0bba5>The Small Web</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><footerclass="vp-doc"data-v-ff18d08b><divdata-v-ff18d08b>CC 2024 <aclass="h-card u-url u-uid"rel="me"href="/about"data-v-ff18d08b><imgsrc="/me.jpg"alt=""data-v-ff18d08b>The Paper Pilot</a>. <arel="license"href="https://creativecommons.org/licenses/by-nc-sa/4.0/"data-v-ff18d08b>CC BY-NC-SA 4.0</a>.</div><divdata-v-ff18d08b>Any and all opinions listed here are my own and not representative of my employers; future, past and present.</div><divdata-v-ff18d08b><ahref="https://resu
