Reorganize elements and add missing

Author: Fernando-A-Rocha

elements/Misc/acl.yaml renamed to elements/ACL/acl.yaml

@@ -0,0 +1,3 @@
+name: dx-font
+description: |
+  The **DX font** class represents a custom typeface which can be used in the **Drawing functions**. A DX font is created with [dxCreateFont](/dxCreateFont) and can be used as a parameter in [dxDrawText](/dxDrawText).

elements/Misc/aclgroup.yaml renamed to elements/ACL/aclgroup.yaml

@@ -0,0 +1,6 @@
+name: shader
+# In the old wiki, this element is a type of "material" element
+description: |
+  The shader class represents a Microsoft HLSL Effect File(.fx) loaded by the client, which can be used instead of a texture when calling [dxDrawImage](/dxDrawImage).
+
+  

elements/Misc/account.yaml renamed to elements/Account/account.yaml

@@ -0,0 +1,4 @@
+name: texture
+# In the old wiki, this element is a type of "material" element
+description: |
+  The texture class represents a source of renderable pixels which can be used as an image with [dxDrawImage](/dxDrawImage), [dxDrawImageSection](/dxDrawImageSection) or as a value in [dxSetShaderValue](/dxSetShaderValue).

elements/General/sound.yaml renamed to elements/Audio/sound.yaml

@@ -0,0 +1,3 @@
+name: gui-font
+description: |
+  The **GUI font** class represents a custom typeface which can be applied to [GUI widgets](/GUI_widgets). A GUI font is created with [guiCreateFont](/guiCreateFont) and can then used as a parameter in [guiSetFont](/guiSetFont).

elements/Misc/ban.yaml renamed to elements/Ban/ban.yaml

@@ -16,7 +16,7 @@ const theseEvents = eventsByTypeByCategory.client;
 
     {Object.entries(theseEvents).map(([category, events]) => (
         <section>
-            <details>
+            <details open>
                 <summary>{category} events</summary>
                 <ul>
                     {events.map(event => (

elements/Misc/db-connection.yaml renamed to elements/DB/db-connection.yaml

@@ -16,7 +16,7 @@ const theseFunctions = functionsByTypeByCategory.client;
 
     {Object.entries(theseFunctions).map(([category, funcs]) => (
         <section>
-            <details>
+            <details open>
                 <summary>{category} functions</summary>
                 <ul>
                     {funcs.map(func => (

elements/Drawing/dx-font.yaml

@@ -12,25 +12,24 @@ const elementsByCategory = getElementsByCategory();
   tableOfContents: false,
 }}>
   <p>In order to perform operations on MTA objects via scripting, pointers to internal classes are exported to scripts as Lua userdata. Each of these classes has a number of exported scripting functions associated with them. Elements that have a physical representation in the game are also known as <a href="/Entity">Entities</a>.</p>
-  <p>An <strong>element</strong> is a generic class that can represent almost all in-game entities. The built-in element types are:</p>
-  <ul>
-    {Object.entries(elementsByCategory).map(([category, elements], index) => (
-      <section>
-            {/* <details {...(index === 0 ? { open: true } : {})}> */}
-            <details>
-                <summary>{category} elements</summary>
-                <ul>
-                    {elements.map(element => (
-                        <li>
-                            <a href={`/${element.id}`}>{element.id}</a>
-                            {hasOopMethods(element) ? <span class="small-text">[OOP]</span> : ''}
-                        </li>
-                    ))}
-                </ul>
-            </details>
-        </section>
+  <p>An <strong>element</strong> is a generic class that can represent almost all in-game entities.
+    The built-in element types are:</p>
+  
+  <div class="mtaflex">
+    {Object.entries(elementsByCategory).map(([category, elements]) => (
+      <div class="mtabox">
+        <span class="mtabox_title">{category} elements</span>
+        <ul>
+          {elements.map(element => (
+            <li>
+              <a href={`/${element.id}`}>{element.id}</a>
+              {hasOopMethods(element) ? <span class="small-text">[OOP]</span> : ''}
+            </li>
+          ))}
+        </ul>
+      </div>
     ))}
-  </ul>
+  </div>
 
   <hr>
 
@@ -44,3 +43,26 @@ const elementsByCategory = getElementsByCategory();
       'article:Entity',
   ])} currentId='' />
 </StarlightPage>
+
+<style>
+  .mtaflex {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .mtabox {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+  }
+  .mtabox_title {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+</style>

elements/Drawing/shader.yaml

@@ -0,0 +1,46 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { getSeeAlsoLinksFromList } from '@src/utils/general';
+import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
+
+import { getElementsByCategory } from '@src/utils/elements';
+const elementsByCategory = getElementsByCategory();
+const entities = elementsByCategory['Entity'] || [];
+
+---
+<StarlightPage frontmatter={{
+    template: 'doc',
+    title: 'Entity',
+    tableOfContents: false,
+}}>
+    <p>An <strong>entity</strong> is an element that has a position and a physical representation in the world. The following elements are entities:</p>
+    
+    <div class="mtagrid">
+        {Array.from({ length: Math.ceil(entities.length / 10) }, (_, i) => (
+            <ul class="mtabox">
+                {entities.slice(i * 10, i * 10 + 10).map(entity => (
+                    <li>
+                        <a href={`/${entity.id}`}>{entity.id}</a>
+                    </li>
+                ))}
+            </ul>
+        ))}
+    </div>
+
+    <SeeAlsoSection seeAlsoLinks={getSeeAlsoLinksFromList([
+        'article:Element',
+        'article:Element_tree',
+    ])} currentId='' />
+</StarlightPage>
+
+<style>
+    .mtagrid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr); /* 2 boxes per row */
+    }
+
+    .mtabox {
+        padding: 4px 8px 8px 8px;
+        padding: 1rem;
+    }
+</style>

elements/Drawing/texture.yaml

@@ -10,9 +10,10 @@ const elementsByCategory = getOOPElementsByCategory();
     title: 'OOP Classes',
     tableOfContents: false,
 }}>
-    <p>This page lists all <strong>Classes</strong> available in the <a href="/Lua_API">Lua API</a> using <a href="/OOP_Introduction">OOP</a> organized by category.</p>
+    <p>This page lists all <strong>special classes</strong> only available in the <a href="/Lua_API">Lua API</a> using <a href="/OOP_Introduction">OOP</a>.</p>
 
-    <p><strong>Vectors</strong> and <strong>Matrices</strong> make it easier to drop the complex maths and go straight ahead with fun part of maths. OOP does not have to be enabled in the server config for this to be enabled.</p>
+    <p><strong>Vectors</strong> and <strong>Matrices</strong> make it easier to drop the complex maths and go straight ahead with fun part of maths.</p>
+    <p>OOP does not have to be enabled in the server config for this to be enabled.</p>
 
     {Object.entries(elementsByCategory).map(([category, elements]) => (
         <section>

elements/General/col.yaml renamed to elements/Engine/col.yaml

@@ -15,7 +15,7 @@ const eventsByCategory = getEventsByCategory();
 
     {Object.entries(eventsByCategory).map(([category, events]) => (
         <section>
-            <details>
+            <details open>
                 <summary>{category} events</summary>
                 <ul>
                     {events.map(event => (

elements/General/dff.yaml renamed to elements/Engine/dff.yaml

@@ -15,7 +15,7 @@ const functionsByCategory = getFunctionsByCategory();
 
     {Object.entries(functionsByCategory).map(([category, funcs]) => (
         <section>
-            <details>
+            <details open>
                 <summary>{category} functions</summary>
                 <ul>
                     {funcs.map(func => (

elements/General/txd.yaml renamed to elements/Engine/txd.yaml

@@ -16,7 +16,7 @@ const theseEvents = eventsByTypeByCategory.server;
 
     {Object.entries(theseEvents).map(([category, events]) => (
         <section>
-            <details>
+            <details open>
                 <summary>{category} events</summary>
                 <ul>
                     {events.map(event => (

elements/General/blip.yaml renamed to elements/Entity/blip.yaml

@@ -16,7 +16,7 @@ const theseFunctions = functionsByTypeByCategory.server;
 
     {Object.entries(theseFunctions).map(([category, funcs]) => (
         <section>
-            <details>
+            <details open>
                 <summary>{category} functions</summary>
                 <ul>
                     {funcs.map(func => (

elements/General/building.yaml renamed to elements/Entity/building.yaml

@@ -16,7 +16,7 @@ const theseFunctions = functionsByTypeByCategory.shared;
 
     {Object.entries(theseFunctions).map(([category, funcs]) => (
         <section>
-            <details>
+            <details open>
                 <summary>{category} functions</summary>
                 <ul>
                     {funcs.map(func => (