[DOCS] improved glossary, added saving process and fixes

Author: muit

Docs/_glossary.md

@@ -1,3 +1,6 @@
 ##### Record
 Contains a block of serialized information.
 Each actor, component or level have an assotiated record containing its saved information.
+
+##### Serialize, Serialization
+Process of converting memory from an object or struct into binary data

Docs/assets/styles.css

@@ -1,12 +1,12 @@
 
-@font-face { font-family: 'Lovelo'; src: url('Fonts/Lovelo-Black.otf') format('opentype'); }
-@font-face { font-family: 'Lovelo Line'; src: url('Fonts/Lovelo-LineBold.otf') format('opentype'); font-weight: bold; }
-@font-face { font-family: 'Lovelo Line'; src: url('Fonts/Lovelo-LineLight.otf') format('opentype'); }
+@font-face { font-family: 'Lovelo'; src: url('fonts/Lovelo-Black.otf') format('opentype'); }
+@font-face { font-family: 'Lovelo Line'; src: url('fonts/Lovelo-LineBold.otf') format('opentype'); font-weight: bold; }
+@font-face { font-family: 'Lovelo Line'; src: url('fonts/Lovelo-LineLight.otf') format('opentype'); }
 
-@font-face { font-family: 'Century Gothic'; src: url('Fonts/Gothic.ttf') format('truetype'); }
-@font-face { font-family: 'Century Gothic'; src: url('Fonts/Gothic-Bold.ttf') format('truetype'); font-weight: bold; }
-@font-face { font-family: 'Century Gothic'; src: url('Fonts/Gothic-Italic.ttf') format('truetype'); font-style: italic; }
-@font-face { font-family: 'Century Gothic'; src: url('Fonts/Gothic-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; }
+@font-face { font-family: 'Century Gothic'; src: url('fonts/Gothic.ttf') format('truetype'); }
+@font-face { font-family: 'Century Gothic'; src: url('fonts/Gothic-Bold.ttf') format('truetype'); font-weight: bold; }
+@font-face { font-family: 'Century Gothic'; src: url('fonts/Gothic-Italic.ttf') format('truetype'); font-style: italic; }
+@font-face { font-family: 'Century Gothic'; src: url('fonts/Gothic-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; }
 
 
 :root {

Docs/index.html

@@ -51,12 +51,15 @@
         pre: '',
         style: 'text-align: center;'
       },
+      'flexible-alerts': {
+        style: 'flat'
+      },
       plugins: [
         EditOnGithubPlugin.create(
           "https://github.com/PipeRift/SaveExtension/blob/main/Docs/",
           "https://github.com/PipeRift/SaveExtension/edit/main/Docs/",
           "<img class='emoji' src='https://github.githubassets.com/images/icons/emoji/memo.png' alt='memo'> Edit"),
-        Glossary.create({})
+        Glossary.create()
       ],
       mustache: {
         data: ['https://raw.githubusercontent.com/PipeRift/SaveExtension/main/SaveExtension.uplugin']
@@ -70,10 +73,10 @@
   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-csharp.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-cpp.min.js"></script>
 
-  <link rel="stylesheet" href="unpkg.com/@fortawesome/fontawesome-free/css/fontawesome.css" />
-  <link rel="stylesheet" href="unpkg.com/@fortawesome/fontawesome-free/css/brands.css" />
-  <link rel="stylesheet" href="unpkg.com/@fortawesome/fontawesome-free/css/regular.css" />
-  <link rel="stylesheet" href="unpkg.com/@fortawesome/fontawesome-free/css/solid.css" />
+  <link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/fontawesome.css" />
+  <link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/brands.css" />
+  <link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/regular.css" />
+  <link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/solid.css" />
 
   <!-- Plugins -->
   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
@@ -84,6 +87,7 @@
   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/front-matter.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify-mustache"></script>
   <script src="//unpkg.com/docsify-fontawesome/dist/docsify-fontawesome.min.js"></script>
+  <script src="//unpkg.com/docsify-plugin-flexible-alerts"></script>
 
   <script src="//unpkg.com/mermaid/dist/mermaid.js"></script>
   <script src="//unpkg.com/docsify-mermaid@latest/dist/docsify-mermaid.js"></script>
@@ -96,8 +100,8 @@
         darkMode: true
       },
       flowchart:{
-          htmlLabels:true,
-          curve:'linear',
+          htmlLabels: true,
+          curve: 'linear',
       },
     });
   </script>

Docs/quick-start/first-steps.md

@@ -42,7 +42,7 @@ To be able to save, we will need to:
 3. Assign the preset inside Project Settings
    ![Assign Preset](img/default-preset.png)
 
-{% hint style='hint' %} For detailed info see [**Save Presets**](presets.md) and [**Filters**](filters.md) {% endhint %}
+?> For detailed info see [**Save Presets**](presets.md) and [**Filters**](filters.md)
 
 ## Marking variables to be saved
 

Docs/quick-start/presets.md

@@ -31,7 +31,7 @@ The preset can also be changed from blueprints in runtime calling:
 
 ![INSERT DETAILS SCREENSHOT HERE]()
 
-{% hint style='hint' %} All settings have defined tooltips describing what they are used for. Check them moving your mouse over the property. {% endhint %}
+?> All settings have defined tooltips describing what they are used for. Check them moving your mouse over the property.
 
 * **Gameplay**: Configures the runtime behavior of the plugin. Debug settings are also inside Gameplay. [Check Saving & Loading](saving&loading.md)
 * **Serialization**: Toggle what to save from the world.

Docs/resources/configuration.md

@@ -16,7 +16,7 @@ Under *Project Settings* -> *Game* -> *Save Extension: Default Preset* you will
 
 This default settings page is useful in case you have many presets, or in case you have none (because without any preset, default is used).
 
-{% hint style='hint' %} All settings have defined tooltips describing what they are used for. Check them moving your mouse over the property. {% endhint %}
+?> All settings have defined tooltips describing what they are used for. Check them moving your mouse over the property.
 
 * **Gameplay**: Configures the runtime behavior of the plugin. Debug settings are also inside Gameplay. [Check Saving & Loading](saving&loading.md)
 * **Serialization**: Toggle what to save from the world.

Docs/resources/loading-process.md

@@ -1,27 +1,31 @@
 # Loading
-Loading is divided in the following stages:
+Loading is divided in many stages.
 
+*Note: Dot lines(- - - -) mean concurrency*
 ```mermaid
 flowchart LR
     classDef CEntry stroke:#ea9999;
 
-    A[Start]:::CEntry --> B[<b>Notify</b><br>OnLoadBegin]
+    A[Start]:::CEntry --> B[<b>Notify</b><br>OnLoadBegan]
     B --> Load
-    Load --> C[<b>Notify</b><br>OnLoadFinish]
+    Load --> C[<b>Notify</b><br>OnLoadFinished]
     C --> D[Done]
 
     subgraph Load [ ]
-        LoadB{Is at map?}:::CEntry;
+        LoadA[Load Info]:::CEntry -.-> LoadB{Is at map?};
+        LoadA -.-> LoadG[Load Data]
         LoadB -->|No| LoadC[Load Map];
-        LoadB -->|Yes| LoadD[Bake Filters];
-        LoadC --> LoadD;
+        LoadC --> LoadMapLoaded
+        LoadB -->|Yes| LoadMapLoaded;
+        LoadMapLoaded[ ] -.-> LoadWait(( ))
+        LoadG -.-> LoadWait
+        LoadWait --> LoadD[Bake Filters];
         LoadD --> LoadE[Prepare Levels];
         LoadE --> LoadF[Deserialize World];
-
-        click LoadE "./?id=deserialize-world" "Deserialize World" _blank
     end
 ```
 
+
 ## Bake filters
 In this step, all level filters and the general one are baked.
 We need this to check which actors to prepare in each level, and how to deserialize.
@@ -47,5 +51,16 @@ flowchart LR
 This is where the magic happens. The system goes through each actor to be loaded and deserializes its data from its record.
 ```mermaid
 flowchart LR
-    A[Deserialize Game Instance] --> B[Deserialize Actors];
+    classDef CEntry stroke:#ea9999;
+
+    A[Deserialize Game Instance]:::CEntry --> Loop;
+    Loop{Levels left?} -->|No| Done
+    Loop -->|Yes| DeserializeLevel
+
+    subgraph DeserializeLevel [Deserialize Level]
+      LevelB -->|Loop all saved actors| LevelA;
+      LevelA[Deserialize Actor]:::CEntry --> LevelB[Deserialize Actor Components];
+    end
+
+    DeserializeLevel --> Loop;
 ```

Docs/resources/multithreading.md

@@ -26,7 +26,7 @@ This means platforms with many cores like modern CPUs will obtain very noticeabl
 
 This method is only available if [Multithreaded Serialization](#multithreaded-serialization) is disabled.
 
-{% hint style='danger' %} Frame Splitting is not recommended if level streaming saving is enabled. It could be interrupted while loading or saving creating unexpected issues {% endhint %}
+!> Frame Splitting is not recommended if level streaming saving is enabled. It could be interrupted while loading or saving creating unexpected issues
 
 ![Frame-splitted Serialization](./img/frame-splitted_serialization.png)
 

Docs/resources/saving-process.md

@@ -1,12 +1,43 @@
 # Saving
+Saving is divided in many stages:
 
-Saving is divided in multiple stages:
+*Note: Dot lines(- - - -) mean concurrency*
+```mermaid
+flowchart LR
+    classDef CEntry stroke:#ea9999;
+
+    A[Start]:::CEntry --> B[Delete old save];
+    B --> C[<b>Notify</b><br>OnSaveBegan];
+    C -.-> D[Capture Thumbnail];
+    C -.-> E[Capture stats];
+    E --> SerializeWorld[Serialize World];
+    SerializeWorld --> H[<b>Notify</b><br>OnSaveFinished];
+    H --> End;
+```
+
+## Capture thumbnail
+Runs independently from the rest of the save process. An screenshot of the desired characteristics will be queued in ue4's system and then saved with its correct name after x frames.
+
+## Capture stats
+Store game time, current map, filters and more inside a new SlotData object.
+
+## Serialize World
+We iterate all actors to be saved and serialize each of them.
 
 ```mermaid
-graph LR
-    A[Start] --> B{Valid Map?};
-    B -->|Yes| D[Prepare Levels];
-    B -->|No| C[Load Map];
-    C --> D;
-    D --> E[Deserialize];
+flowchart TB
+    classDef CEntry stroke:#ea9999;
+
+    A[Bake Filters]:::CEntry --> Levels;
+    subgraph Levels [Serialize Levels]
+        subgraph Level [Serialize Level]
+            LevelB -->|Loop all saved actors| LevelA;
+            LevelA[Serialize Actor]:::CEntry --> LevelB[Serialize Actor Components];
+        end
+
+        Level -->|Loop all levels| Level;
+    end
+    Levels --> Done
 ```
+
+If **MultithreadedSerialization** is *SaveAsync* or *SaveAndLoadAsync*, actors to be deserialized will be distributed between all available threads.

Docs/src/glossary.js

@@ -12,36 +12,62 @@ let Glossary = {
 
         let termTexts = text.split('#####');
         termTexts.forEach((termText) => {
-          if (termText.length <= 5) { // If it can't possibly contain a term, skip
+          if (termText.length <= 1) { // If it can't possibly contain a term, skip
             return;
           }
 
           // Parse the term and its content
-          let title = termText.split('\n', 1)[0].trim();
-          let id = title.toLowerCase().replace(' ','-');
+          let titles = termText.split('\n', 1)[0].split(',');
+          if(titles.length <= 0) {
+            return;
+          }
+          let id = titles[0].trim().toLowerCase().replace(' ','-');
           let content = termText.substr(termText.indexOf('\n') + 1).trim();
           content = content.replace("\r\n\r\n", "\n");
           if (content.length > 200) {
             content = content.substring(0, 200) + "...";
           }
-          window.$docsify.terms[title] = {
-            id: id,
-            content: content
-          };
+
+          titles.forEach((title)=> {
+            window.$docsify.terms[title.trim()] = {
+              id: id,
+              content: content
+            };
+          });
         });
       });
     };
 
     let addLinks = (content,next,terms) => {
+      let lines = content.split('\n');
+
       for (let term in terms) {
         console.log(term);
 
         let regex = new RegExp(`\\b${term}\\b`,'ig');
-        content = content.replace(regex, (match) => {
-          let termData = terms[term];
-          return `[${match}*](/_glossary?id=${termData.id} "${termData.content}")`;
+
+        let isBlock = false;
+        lines.forEach((line, index) => {
+          // Ignore titles
+          if(line.startsWith('#')) {
+            return;
+          }
+
+          // Ignore blocks of code or graphs
+          if(line.startsWith('```')) {
+            isBlock = !isBlock;
+            return;
+          } else if(isBlock) {
+            return;
+          }
+
+          lines[index] = line.replace(regex, (match) => {
+            let termData = terms[term];
+            return `[${match}*](/_glossary?id=${termData.id} "${termData.content}")`;
+          });
         });
       }
+      content = lines.join('\n');
       next(content);
     };