Polish on some Editor docs; new diagrams with mermaid

Author: GameOverture

mkdocs/docs/editor/asset-manager.md

@@ -54,9 +54,9 @@ title: "Asset Manager"
 The assets and filters are shown in the main tree view:
 
 - You can multi-select and drag 'n drop them to new locations.  
-- Double ++left-button++ an asset will preview it in the **Asset Inspector**, located in the Auxiliary window.  
-- ++right-button++ an asset will open a context menu with additional options, such as renaming, moving to a different bank, or setting Asset Properties.
-- ++right-button++ an asset and selecting **Asset Properties** will open the **Asset Properties** dialog.
+- Double :material-mouse-left-click:++left-button++ an asset will preview it in the **Asset Inspector**, located in the Auxiliary window.  
+- :material-mouse-right-click:++right-button++ an asset will open a context menu with additional options, such as renaming, moving to a different bank, or setting Asset Properties.
+- :material-mouse-right-click:++right-button++ an asset and selecting **Asset Properties** will open the **Asset Properties** dialog.
 
 
 ## Banks
@@ -105,7 +105,12 @@ The library dependency must be a CMake compatible package. You must specify the
 
 With your **Build Settings** determined, you can create a new build of your game by clicking the ![New Build Button](../img/editor/Build-New.png) **New Build** button.
 
-![New Build Dialog](../img/editor/dlg_new_build.png)
+<figure>
+  <img src="../img/editor/dlg_new_build.png" alt="Create Build Dialog">
+  <figcaption></figcaption>
+</figure>
+
+**Build Name** 
 
 Once you created a new build, it will appear in the combo box along in the "Builds" group box.
 

mkdocs/docs/editor/index.md

@@ -7,42 +7,35 @@ title: "Editor Manual"
   <figcaption>HyEditor's default window layout.</figcaption>
 </figure>
 
-<table style="border-collapse: collapse; border: none;">
-    <tr style="border: none;">
-        <td style="border: none; padding-right: 20px;"><strong>1️⃣. Project Explorer</strong><br>
-            Open <em>Project</em>'s will show up here. You may have multiple <em>Project</em>'s open and browsable at once, but only one <em>Project</em> may be 'active' at a given time. All the details are provided in the <a href="projects.html">Projects</a> section.
-        </td>
-        <td style="border: none; padding-right: 20px;"><strong>2️⃣. Asset Manager</strong><br>
-            The currently active <em>Project</em>'s <em>Asset Manager</em>. Each tab along the top are the major asset types handled independantly from each other. All the details are provided in the <a href="asset-manager.html">Asset Manager</a> section.
-        </td>
-    </tr>
-    <tr style="border: none;">
-        <td style="border: none; padding-right: 20px;"><strong>3️⃣. Project Tab Bar</strong><br>
-            All currently open <em>Project Item</em>'s from the active <em>Project</em> are shown here. You can cycle between them with <code>Ctrl+Tab</code> and each item has its own Undo/Redo stack.
-        </td>
-        <td style="border: none; padding-right: 20px;"><strong>4️⃣. Project Item Properties</strong><br>
-            Shows all the properties of the currently selected <em>Project Item</em> in the <em>Project Tab Bar</em>. The properties set here set are reflected in the <em>middle render window</em>.
-        </td>
-    </tr>
-    <tr style="border: none;">
-        <td style="border: none; padding-right: 20px;"><strong>5️⃣. Middle Render Window</strong><br>
-            The currently selected <em>Project Item</em> is previewed here. The renderer used here is the same renderer (<em>HyEngine</em>) used in your game. Previews are created by simulating the same load process as well, so it's a WYSIWYG work-flow. Pan the view with <code>WASD</code> or <code>Middle Mouse</code>, and zoom with the <code>Mouse Wheel</code>.
-        </td>
-        <td style="border: none; padding-right: 20px;"><strong>6️⃣. Auxiliary Window</strong><br>
-            The Auxiliary window is contextually used when needed. By default it'll display logs, but when an additional window is needed by the <em>Asset Manager</em> or the <em>Project Item Properties</em>, a new tab along the bottom will appear and be shown. Its visibility can be toggled with <code>Ctrl+Space</code>.
-        </td>
-    </tr>
-</table>
+<div class="grid cards" markdown>
+
+- :material-numeric-1-circle:{.hyindicator}ㅤ**Project Explorer**  
+    Open Projects will show up here. You may have multiple Projects open and browsable at once, but only one Project may be 'active' at a given time. All the details are provided in the [Projects](projects.md) section.
+- :material-numeric-2-circle:{.hyindicator}ㅤ**Asset Manager**  
+    The currently active Project's Asset Manager. Each tab along the top are the major asset types handled independently from each other. All the details are provided in the [Asset Manager](asset-manager.md) section.
+- :material-numeric-3-circle:{.hyindicator}ㅤ**Project Tab Bar**  
+    All currently open [Project Items](items/index.md) from the active Project are shown here. You can cycle between them with ++ctrl+tab++ and each item has its own Undo/Redo stack.
+- :material-numeric-4-circle:{.hyindicator}ㅤ**Project Item Properties**  
+    Shows all the properties of the currently selected [Project Item](items/index.md) in the Project Tab Bar. The properties set here set are reflected in the middle render window.
+- :material-numeric-5-circle:{.hyindicator}ㅤ**Middle Render Window**  
+    The currently selected [Project Item](items/index.md) is previewed here. The renderer used here is the same renderer (HyEngine) used in your game. Previews are created by simulating the same load process as well, so it's a WYSIWYG work-flow. Pan the view with ++w++ ++a++ ++s++ ++d++ or ++middle-button++, and zoom with the Mouse Wheel :material-mouse-scroll-wheel:.
+- :material-numeric-6-circle:{.hyindicator}ㅤ**Auxiliary Window**  
+    The Auxiliary window is contextually used when needed. By default it'll display logs, but when an additional window is needed (like when creating [TileSets](tilesets.md)), a new tab along the bottom will appear and be shown. Its visibility can be toggled with ++ctrl+space++.
+
+</div>
 
 ## Editor Flow
 
-<figure>
-  <img src="../img/editor_flow.png" alt="HyEditor work flow">
-  <figcaption>Shows how each section of HyEditor works together.</figcaption>
-</figure>
+Shows how each section of HyEditor works together.
+
+<div class="grid" markdown>
+
+![HyEditor work flow](../img/editor_flow.png)
+
+:material-numeric-1-circle:{.hyorange}Open a **Project Item** from **Project Explorer**...  
+:material-numeric-2-circle:{.hyorange}Shows up in **Project Tab Bar**, and when selected...  
+:material-numeric-3-circle:{.hyorange}It will be displayed in the **Project Item Properties** which...  
+:material-numeric-4-circle:{.hyorange}May reference assets in **Asset Manager** to...  
+:material-numeric-5-circle:{.hyorange}Show a preview in the **Middle Render Window**  
 
-1️⃣. Open a **Project Item** from **Project Explorer**...  
-2️⃣. Shows up in **Project Tab Bar**, and when selected...  
-3️⃣. It will be displayed in the **Project Item Properties** which...  
-4️⃣. May reference assets in **Asset Manager** to...  
-5️⃣. Show a preview in the **Middle Render Window**  
+</div>

mkdocs/docs/editor/projects.md

@@ -10,22 +10,22 @@ To create a new Project in the Project Explorer you can:
 - `File > New Project` from the menu
 - Press ++ctrl+shift+n++
 
+<div class="grid" markdown>
+
 <figure>
   <img src="../img/editor/dlg_new_project.png" alt="Create New Project Dialog">
   <figcaption></figcaption>
 </figure>
 
-**Game Title** is the human readable name of your game, used on labels and titles.
-
-**Code Name** will be used to create the main C++ class, and must be compliant with standard naming conventions.
-
-The final **Project Location** (where all the project files will be dumped) is assembled by what's specified in the text field PLUS whether **Create game directory at location** is checked.
+- **Game Title** is the human readable name of your game, used on labels and titles.
+- **Code Name** will be used to create the main C++ class, and must be compliant with standard naming conventions.
+- The final **Project Location** (where all the project files will be dumped) is assembled by what's specified in the text field PLUS whether **Create game directory at location** is checked.
+- Within **Advanced** you can customize how the project folders (like the assets or source code) reside and what they're named. You can even specify locations outside the **Project Location**. For each entry, press **Browse...** and choose the desired *parent* location, and the relative path from the **Project Location** will be filled in. Finally enter the name of the directory itself.
+</div>
 
 !!! note "Example Setup"
     If you want a common location for multiple game projects, specify that root location the text field and keep **Create game directory at location** checked.
 
-Within **Advanced** you can customize how the project folders (like the assets or source code) reside and what they're named. You can even specify locations outside the **Project Location**. For each entry, press **Browse...** and choose the desired *parent* location, and the relative path from the **Project Location** will be filled in. Finally enter the name of the directory itself.
-
 ## Project Explorer
 
 <figure>
@@ -35,17 +35,57 @@ Within **Advanced** you can customize how the project folders (like the assets o
 
 <div class="grid cards" markdown>
 
-- :material-numeric-1-circle:{.hyorange}ㅤAll currently open **Project**s ![Project Icon](../img/editor/Project.png) are shown in the tree view here. Nested beneath each **Project** are the prefix folders containing the **Project Items**. The currently active project is shown with the ![Project Active Icon](../img/editor/Project-Pending.png) sub-icon.  
-- :material-numeric-2-circle:{.hyorange}ㅤYou can drag **Project Items** between entirely different game **Projects** to copy them. This will include importing any required assets into the target project.  
-- :material-numeric-3-circle:{.hyorange}ㅤThe search box allows you to filter the visible **Project Items** in the tree view. You can also filter by item type by selecting the corresponding icon.
+- :material-numeric-1-circle:{.hyindicator}ㅤAll currently open **Project**s ![Project Icon](../img/editor/Project.png) are shown in the tree view here. Nested beneath each **Project** are the prefix folders containing the **Project Items**. The currently active project is shown with the ![Project Active Icon](../img/editor/Project-Pending.png) sub-icon.  
+- :material-numeric-2-circle:{.hyindicator}ㅤYou can drag **Project Items** between entirely different game **Projects** to copy them. This will include importing any required assets into the target project.  
+- :material-numeric-3-circle:{.hyindicator}ㅤThe search box allows you to filter the visible **Project Items** in the tree view. You can also filter by item type by selecting the corresponding icon.
 
 </div>
 
 ## Project Settings
 
-Under Development - Dialog tool meant to edit the game's .hyproj file
+Click the ![Project Settings Button](../img/editor/Project-Settings.png) button along the top tool bar, or :material-mouse-right-click:++right-button++ on a Project within [Project Explorer](#project-explorer) and select "![Project Settings Button](../img/editor/Project-Settings.png) Project Settings" to open the Project Settings dialog.
 
-## Creating new Project Items
 
 
+<div class="grid cards" markdown>
+
+<figure>
+  <img src="../img/editor/dlg-project-settings.png" alt="Project Settings Dialog">
+  <figcaption>Dialog tool meant to edit the game's .hyproj file</figcaption>
+</figure>
+
+<div class="grid cards" markdown>
+- **Render Windows**  
+Most games will only need one window, but if your program requires multiple windows, you can add them here. Each window can have its own Title, Resolution, resize-ability, and starting location. When accessing these windows in code, they are referenced by their order from top to bottom (0-indexed).  
+- **Updates Per Second**  
+Sets a fixed update rate for the game loop. Rendering may occur more frequently, but the game logic will only update at this rate. A value of 0 means it will use non-throttled, variable updating, and will match the rendering frame rate.  
+- **Show Mouse Cursor**  
+When the mouse cursor is over the game window, it will show the operating system's version of the mouse if this option is checked. Otherwise, the OS's mouse cursor will be hidden while over the game window.  
+- **Number of Input Maps**  
+Input Maps take all the actions the player can perform and assigns inputs to them. You generally set the number of input maps equal to the number of local players your game supports. Each player will have their own input map.  
+</div>
+</div>
+
+<div class="grid cards" markdown>
+- **Pixels Per Meter**  
+Sets the scale of the physics simulation. This value defines how many pixels in the game world correspond to one meter in the physics engine. Adjusting this value can affect the feel of movement and collisions in your game.  
+- **Gravity**  
+Direction of the world's gravity vector, measured in meters per second squared (m/s²). Harmony's world up is positive Y.
+- **Use Console Window**  
+When checked, a separate console window will open alongside your game. This is useful for debugging, as it can display log messages, errors, and other output from your game. The Size is not the resolution of the console window, but rather the number of text columns and rows it can display at once. Location is desktop coordinates like how Render Windows are positioned.
+</div>
+
+## Creating new Project Items
+
+To create a new Item you can :material-mouse-right-click:++right-button++ in the [Project Explorer](#project-explorer) on a ![Prefix Folder](../img/editor/Prefix.png) prefix folder and select `New Item > [select item]` to create an item at that location, or use one of the following methods:
+
+- `File > New Item > [select item]` from the top menu
+- Press ++ctrl+n++, ++s++ to create a new ![New Sprite](../img/editor/Sprite-New.png) Sprite  
+- Press ++ctrl+n++, ++m++ to create a new ![New TileMap](../img/editor/TileMap-New.png) Tile Map  
+- Press ++ctrl+n++, ++t++ to create a new ![New Text](../img/editor/Text-New.png) Text  
+- Press ++ctrl+n++, ++f++ to create a new ![New Particle FX](../img/editor/Particles-New.png) Particle FX  
+- Press ++ctrl+n++, ++i++ to create a new ![New Spine](../img/editor/Spine-New.png) Spine  
+- Press ++ctrl+n++, ++p++ to create a new ![New Prefab](../img/editor/Prefab-New.png) Prefab  
+- Press ++ctrl+n++, ++a++ to create a new ![New Audio](../img/editor/Audio-New.png) Audio  
+- Press ++ctrl+n++, ++e++ to create a new ![New Entity](../img/editor/Entity-New.png) Entity