Show error message for BackgroundMusicSourceInput when expand unselec…

…ted choice inputs is false, fix exporting volume, add basic guide for template import/export.

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() {

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>
   );
 }

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 ?