From e74d9641b74a30309f60cfa6db3ec850ad69d6b7 Mon Sep 17 00:00:00 2001
From: luckytyphlosion <10688458+luckytyphlosion@users.noreply.github.com>
Date: Sat, 5 Aug 2023 20:02:51 -0400
Subject: [PATCH] Show error message for BackgroundMusicSourceInput when expand
 unselected choice inputs is false, fix exporting volume, add basic guide for
 template import/export.

---
 src/renderer/auto-tt-rec-config-exporter.ts         | 13 +++++++++++--
 src/renderer/components/GUIHeader.tsx               | 12 ++++++++++++
 .../form_components/BackgroundMusicSourceInput.tsx  |  3 ++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/renderer/auto-tt-rec-config-exporter.ts b/src/renderer/auto-tt-rec-config-exporter.ts
index fff090b..2fbc24a 100644
--- a/src/renderer/auto-tt-rec-config-exporter.ts
+++ b/src/renderer/auto-tt-rec-config-exporter.ts
@@ -253,8 +253,17 @@ export class AutoTTRecConfigExporter {
   }
 
   private exportVolumeInputs() {
-    this.exportArg("game-volume", this.getFormDataNumberValue("game-volume-numberinput"));
-    this.exportArg("music-volume", this.getFormDataNumberValue("music-volume-numberinput"));
+    let gameVolumeNumberinput = this.getFormDataNumberValue("game-volume-numberinput");
+    if (gameVolumeNumberinput !== "<FILLME>") {
+      gameVolumeNumberinput /= 100;
+    }
+    let musicVolumeNumberinput = this.getFormDataNumberValue("music-volume-numberinput");
+    if (musicVolumeNumberinput !== "<FILLME>") {
+      musicVolumeNumberinput /= 100;
+    }
+
+    this.exportArg("game-volume", gameVolumeNumberinput);
+    this.exportArg("music-volume", musicVolumeNumberinput);
   }
 
   private exportMusicFilename() {
diff --git a/src/renderer/components/GUIHeader.tsx b/src/renderer/components/GUIHeader.tsx
index 4f80a87..426f433 100644
--- a/src/renderer/components/GUIHeader.tsx
+++ b/src/renderer/components/GUIHeader.tsx
@@ -16,6 +16,18 @@ export function GUIHeader() {
         <li>Join the <a href=" https://discord.gg/6FqfpnqP57">Discord</a> for any questions:</li>
         <li>Source Code (for GUI): <a href="https://github.com/luckytyphlosion/auto-tt-recorder-gui">https://github.com/luckytyphlosion/auto-tt-recorder-gui</a></li>
       </ul>
+      <h3 className="troubleshooting-header">Template explanation:</h3>
+      <ul className="auto-tt-rec-troubleshooting">
+        <li>To save time when recording ghosts with similar settings, create a template.</li>
+        <li>Leave all fields blank which you want to fill in every time you record.</li>
+        {/*<ul>
+          <li>For example, you may want to create a template for Personal Bests, where the <em>Ghost Description</em> field is pre-filled with "Personal Best", and all other fields are set except the <em>Chadsoft ghost page link</em> and <em>Music filename</em> fields.</li>
+        </ul>*/}
+        <li>Radio (circle) buttons, checkboxes, file select inputs, and dropdowns can be made blank by right-clicking them.</li>
+        <li>Export the template using the "Export Template..." button.</li>
+        <li>You can now import that template using the "Import Template..." button.</li>
+        <li>Alternatively, set the options to be pre-filled with the last opened template via the "Last opened template" radio button below.</li>
+      </ul>
     </div>
   );
 }
diff --git a/src/renderer/components/form_components/BackgroundMusicSourceInput.tsx b/src/renderer/components/form_components/BackgroundMusicSourceInput.tsx
index e8ee476..4c86871 100644
--- a/src/renderer/components/form_components/BackgroundMusicSourceInput.tsx
+++ b/src/renderer/components/form_components/BackgroundMusicSourceInput.tsx
@@ -8,6 +8,7 @@ import { FormComplexity } from "../layout_components/FormComplexityLayout";
 import { Timeline } from "../layout_components/choice_layouts/NoTop10CategoryLayout";
 import { DeselectableDropdown } from "../DeselectableDropdown";
 import { makeReadonlyArraySet, ValidValues } from "../../../shared/array-set";
+import { SimpleErrorMessage } from "../SimpleErrorMessage";
 
 import useRenderCounter from "../../RenderCounter";
 
@@ -35,7 +36,7 @@ export function BackgroundMusicSourceInput(props: {timeline: Timeline, formCompl
       </DeselectableDropdown>
       {
         musicFilenameInputEnable ? 
-         <MusicFilenameInput/> : ""
+         <MusicFilenameInput/> : <SimpleErrorMessage name="background-music-source"/>
       }
       {
         enableMusicPresentationInput && props.formComplexity > FormComplexity.SIMPLE ?