6 lines
11 KiB
JavaScript
6 lines
11 KiB
JavaScript
import{_ as a,a as e,b as s,ag as t}from"./chunks/framework.BcrMLAmg.js";const u=JSON.parse('{"title":"Frequently Asked Questions","description":"","frontmatter":{},"headers":[],"relativePath":"guides/faq.md","filePath":"guides/faq.md","lastUpdated":1740313499000}'),l={name:"guides/faq.md"};function n(h,i,o,r,d,p){return s(),e("div",null,i[0]||(i[0]=[t(`<h1 id="frequently-asked-questions" tabindex="-1">Frequently Asked Questions <a class="header-anchor" href="#frequently-asked-questions" aria-label="Permalink to "Frequently Asked Questions""></a></h1><h2 id="general" tabindex="-1">General <a class="header-anchor" href="#general" aria-label="Permalink to "General""></a></h2><h3 id="what-is-basalt" tabindex="-1">What is Basalt? <a class="header-anchor" href="#what-is-basalt" aria-label="Permalink to "What is Basalt?""></a></h3><p>Basalt is a UI framework for CC:Tweaked that helps you create user interfaces easily and efficiently. It provides pre-built components, event handling, and advanced features like animations and themes.</p><h3 id="why-should-i-use-basalt-instead-of-direct-terminal-manipulation" tabindex="-1">Why should I use Basalt instead of direct terminal manipulation? <a class="header-anchor" href="#why-should-i-use-basalt-instead-of-direct-terminal-manipulation" aria-label="Permalink to "Why should I use Basalt instead of direct terminal manipulation?""></a></h3><p>Basalt handles many complex aspects automatically:</p><ul><li>Event management</li><li>Screen rendering</li><li>Component positioning</li><li>State management</li><li>Layout organization</li></ul><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to "Installation""></a></h2><h3 id="how-do-i-install-basalt" tabindex="-1">How do I install Basalt? <a class="header-anchor" href="#how-do-i-install-basalt" aria-label="Permalink to "How do I install Basalt?""></a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">wget run </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">https</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">//</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">raw.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">githubusercontent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">com</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Pyroxenium</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Basalt2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">main</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">install.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">lua</span></span></code></pre></div><h3 id="can-i-customize-my-installation" tabindex="-1">Can I customize my installation? <a class="header-anchor" href="#can-i-customize-my-installation" aria-label="Permalink to "Can I customize my installation?""></a></h3><p>Yes! The installer allows you to:</p><ul><li>Choose between Release/Dev versions</li><li>Select specific components</li><li>Include LuaLS definitions</li><li>Enable minification</li></ul><h2 id="common-issues" tabindex="-1">Common Issues <a class="header-anchor" href="#common-issues" aria-label="Permalink to "Common Issues""></a></h2><h3 id="why-isn-t-my-ui-updating" tabindex="-1">Why isn't my UI updating? <a class="header-anchor" href="#why-isn-t-my-ui-updating" aria-label="Permalink to "Why isn't my UI updating?""></a></h3><p>Remember to call <code>basalt.run()</code> at the end of your program. Without it, your UI won't start.</p><h3 id="why-are-my-elements-not-visible" tabindex="-1">Why are my elements not visible? <a class="header-anchor" href="#why-are-my-elements-not-visible" aria-label="Permalink to "Why are my elements not visible?""></a></h3><p>Check:</p><ol><li>Element positions are within parent bounds</li><li>Parent container is large enough</li><li>Element's <code>visible</code> property is true</li><li>Z-index conflicts with other elements</li></ol><h3 id="how-do-i-handle-screen-resizes" tabindex="-1">How do I handle screen resizes? <a class="header-anchor" href="#how-do-i-handle-screen-resizes" aria-label="Permalink to "How do I handle screen resizes?""></a></h3><p>Use dynamic positioning with strings, or use functions:</p><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"{parent.width - 5}"</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- 5 from right edge</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"{parent.width - 10}"</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 style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- 5 padding on each side</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">element</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(self) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">-- Another example, but as function call</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> self</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">getParent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</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></code></pre></div><h2 id="development" tabindex="-1">Development <a class="header-anchor" href="#development" aria-label="Permalink to "Development""></a></h2><h3 id="how-do-i-add-custom-plugins" tabindex="-1">How do I add custom plugins? <a class="header-anchor" href="#how-do-i-add-custom-plugins" aria-label="Permalink to "How do I add custom plugins?""></a></h3><p>Create a new plugin in the plugins directory. See <a href="https://github.com/Pyroxenium/Basalt2/blob/main/examples/pluginExample.lua" target="_blank" rel="noreferrer">pluginExample</a> for a example on how to create plugins</p><h3 id="where-can-i-find-more-examples" tabindex="-1">Where can I find more examples? <a class="header-anchor" href="#where-can-i-find-more-examples" aria-label="Permalink to "Where can I find more examples?""></a></h3><ul><li>Check the examples directory in the repository</li><li>Visit our <a href="https://github.com/Pyroxenium/Basalt2" target="_blank" rel="noreferrer">GitHub</a></li><li>Join our <a href="https://discord.gg/yNNnmBVBpE" target="_blank" rel="noreferrer">Discord</a></li></ul><h3 id="how-do-i-contribute" tabindex="-1">How do I contribute? <a class="header-anchor" href="#how-do-i-contribute" aria-label="Permalink to "How do I contribute?""></a></h3><ol><li>Fork the repository</li><li>Create a feature branch</li><li>Submit a pull request</li><li>Join our Discord for discussion</li></ol><h2 id="performance" tabindex="-1">Performance <a class="header-anchor" href="#performance" aria-label="Permalink to "Performance""></a></h2><h3 id="how-can-i-optimize-my-basalt-application" tabindex="-1">How can I optimize my Basalt application? <a class="header-anchor" href="#how-can-i-optimize-my-basalt-application" aria-label="Permalink to "How can I optimize my Basalt application?""></a></h3><p>Basalt does already a lot of optimization:</p><ul><li>The render loop only runs when something visually changed (color, position, size,..) which means it only runs once, even if Basalt gets spammed with events (timer events or mouse events).</li><li>The event system is highly optimized: <ul><li>Events are only registered for elements that actually use them</li><li>Events bubble up through the element hierarchy efficiently</li><li>Event handlers are stored in a flat structure for quick access</li><li>Events are automatically cleaned up when elements are removed</li><li>Parent containers only receive events their children actually use</li></ul></li></ul><p>Additional tips for optimization:</p><ul><li>Group elements in Frames to reduce render calls</li><li>Use <code>setVisible(false)</code> instead of removing elements you'll need again</li><li>In case you need a LOT of elements you can use addDelayed{Element}, for example addDelayedButton instead of addButton</li></ul>`,35)]))}const c=a(l,[["render",n]]);export{u as __pageData,c as default};
|